How I created a mood-changing animation using CSS

Remember the cartoons that we watched in childhood? At the time, they were the personification of animation. Now animation is not only cartoons, we meet it almost every day, checking the phone or using any device that has a screen.
Today, animation is used not only to attract attention, but also to improve user interaction and ease of navigation. In any good design, the animation is added in such a way that it is combined with the general concept, thereby creating a convenient user interface.
How I created a mood-changing animation using CSS
In this article, we will create a simple face animation with different expressions, and in the process we will learn a little about CSS.


Let's start

We will use the technique of CSS, rarely used by web developers, but to which designers quite often resort. It is called masking.
What comes to mind when you hear the words "mask"? Probably, you presented something that hides the essence. That's all we need to know.
Wait - but the article is connected with writing and using CSS animation No panic! All right!

Creating a basic

Suppose we have a tag. div from background: green; and it looks like this:
There is also a file face.svg :
If we apply the CSS property mask-image: url (face.svg); to tag div , then you will be amazed to see the result:
You might think that this is strange. The face.svg picture was placed on top of div but took the background color. This is contrary to our expectations. This happens because of the property mask-type which makes the opaque part of svg transparent. This makes the background color visible.
Let's not go deep. Just keep in mind that you can use background-color to change the color of the mask. If you are familiar with the different ways of using background-color , you can also apply gradients and write a simple gradient that fills the center with red and radially spreads black around the edges. The code will look like this:
3r3178. 3r3179. background-image: -webkit-radial-gradient (hsla (? 100%, 50%, .7), hsla (? 100%, 20%, .8), hsla (? 100%, 10%, 1 )) 3r3196.
The result will be:

Adding animation

Now add an animation to this empty face. For this we use expression.svg which you see in the image below. For simplicity, I created all the svg files of the same width and height, so I don’t have to align the faces and expressions manually.
It is now mask-image It has a cool option that allows you to use multiple images as masks. Therefore, we can do this: mask-image: url (face.svg), url (expression.svg); . Here's what happened:
One of the most important properties of CSS masks is mask position , thanks to which the mask is located in the upper left corner relative to the parent element. And I can arrange several masks using the property. mask position the same as mask-image . To make a face sad, use something like this: mask-position: 0 ? ???px; . That's what happened.
The first position is 3r3220. ???r3r3221. for face.svg , and the second ???px - for expression.svg . This led to a transfer of 12px and gave the face the necessary expression.

Application functionality

Now let's animate these expressions when you hover over. The full code that we get after applying the hover pseudo-class will be:
3r3178. 3r3179. i {
background-image: -webkit-radial-gradient (hsla (? 100%, 50%, .7), hsla (? 100%, 20%, .8) 60%, hsla (? 100%, 10% , one));
mask-image: url ('face.svg'), url ('expression.svg');
mask-position: 0 ? ???px; /* To make the sad expression * /
transition: mask-position .5s ease-out;
i: hover {
background-image: -webkit-radial-gradient (hsla (12? 100%, 50%, .7), hsla (12? 100%, 20%, .8) 60%, hsla (12? 100%, 10% , one));
mask-position: 0 ? 0 0; /* To make the happy expression * /
transition: mask-position .1s linear;
} 3r3196.
After playing a little more with the properties of CSS, we can do this:
This is one of the methods that you can use to create the most exciting animations that we encounter almost daily.

One important note is

Masking may not work in all browsers. To make it work in all browsers, simply add special browser labels, such as -webkit- , -moz- and -0- .
You can see the full code at github and codepen 3r33232. . Thank! Hope it was helpful.

Drop by - a site for searching virtual servers. 1500 tariffs from 130 hosters, convenient interface and a large number of criteria for finding the best virtual server.

+ 0 -

Add comment