In 2020, master CSS animation thoroughly

Writing in the front

It’s already 2020. Have you learned CSS3 animation this year?

CSS animation is an awkward issue, because companies don’t use CSS animation very much, and most developers are used to JavaScript animation, so many programmers are reluctant to learn CSS animation (at least I am). But a front-end engineer who doesn’t know CSS animation can’t be called a master of CSS3. In fact, when you really learn CSS animation, you will be attracted by its charm, which can reduce the amount of code and improve performance.

This is a series of four articles.

Transition to CSS Animation by 2020

In 2020, master CSS animation thoroughly

By 2020, fully master CSS animation

Front-end in-depth CSS chapter I primary [transform], hand in hand with you to achieve 1024 programmer section animation

The pre-knowledge of this article is transition, if you don’t know, you can click the corresponding link to learn.

Without further ado, let’s learn today’s leading character Animation together!

Animation grammar

Animation means “animation” in Chinese. After mastering it, you can use it to make all kinds of cool animations.

@keyframes: Defines an animation. The animation name defined is used by animation-name.

div{
    width:50px;
    height:50px;
    background:#f40;
    border-radius:50%;
    animation:mymove 2s;
}

@keyframes mymove{
    0%   {width:50px;height:50px;}	
    50%   {width:100px;height:100px;}	
    100%   {width:50px;height:50px;}
}
Copy the code

@keyframes is mainly used for animation of keyframes. Each @keyframes should be followed by a name. In this case, mymove is used as the name of animation frame.

Animation-name: Retrieves or sets the name of the animation to which the object is applied. This must be used in conjunction with the rule @keyframes because the animation name is defined by @keyframes

div{
    width:50px;
    height:50px;
    background:#f40;
    border-radius:50%;
    animation-name:mymove;
    animation-duration:2s;
}

@keyframes mymove{
    0%   {width:50px;height:50px;}	
    50%   {width:100px;height:100px;}	
    100%   {width:50px;height:50px;}
}
Copy the code

Before animation-name is used, we have defined a frame animation named myMove, which uses the name of the frame animation as the value of animation-name, meaning that the current element will execute the set frame animation.

Animation-duration: Retrieves or sets the duration of an object’s animation

We also need to set the time required for an animation to be executed. In this case, we use the animation-duration property, so the time shown in the previous example is 2 seconds.

Animation-timing-function: Retrieves or sets the transition type of an object’s animation

div{
    width:100px;
    height:50px;
    background:#f40;
    position:relative;
    animation-name:mymove;
    animation-duration:3s;
    animation-timing-function:ease-in-out;
}
@keyframes mymove{
    0% {left:0px;}
    100% {left:300px;}
}
Copy the code

Animation-timing -function changes the speed of the animation in each frame. Transition-timing-function displays only ease-in-out animations, which can be interpreted as slow-fast-slow. Others are not shown, but can be understood by referring to the following table.

Animation-delay: Retrieves or sets the delay for animating an object

div{
    width:50px;
    height:50px;
    background:#f40;
    border-radius:50%;
    animation-name:mymove;
    animation-duration:2s;
    animation-delay:2s;
}

@keyframes mymove{
    0%   {width:50px;height:50px;}	
    50%   {width:100px;height:100px;}	
    100%   {width:50px;height:50px;}
}
Copy the code

The value of animation-delay is 2s, which means that the animation will be delayed after a delay of two seconds.

Animation-rotund-count: Retrieves or sets the number of iterations of an object’s animation

div{
    width:50px;
    height:50px;
    background:#f40;
    border-radius:50%;
    animation-name:mymove;
    animation-duration:2s;
    animation-iteration-count:infinite;
}

@keyframes mymove{
    0%   {width:50px;height:50px;}	
    50%   {width:100px;height:100px;}	
    100%   {width:50px;height:50px;}
}
Copy the code

The value of animation-rotund-count is infinite, which means that the animation will be executed an infinite number of times. This is a loop, but you can also give it a specific number, and it will stop automatically after the specified number of times.

Animation-direction: Retrieves or sets whether an object animation moves backward in a loop

div{
    width:100px;
    height:50px;
    background:#f40;
    position:relative;
    animation-name:mymove;
    animation-duration:2s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
}

@keyframes mymove{
    0% {left:0px;}
    100% {left:300px;}
}
Copy the code

Here the animation-direction value is alternate, which means that the animation will be executed back and forth repeatedly. It also has other attributes, which are given in the following table for friends to try by themselves.

Animation-play-state: Retrieves or sets the state of an object’s animation

<style>
div{
    width:50px;
    height:50px;
    background:#f40;
    border-radius:50%;
    animation-name:mymove;
    animation-duration:2s;
    animation-iteration-count:infinite;
}
@keyframes mymove{
    0%   {width:50px;height:50px;}	
    50%   {width:100px;height:100px;}	
    100%   {width:50px;height:50px;}
}
</style>
<body>
    <button onclick="pause()">suspended</button>
    <button onclick="run()">restore</button>
    <div></div>
</body>
Copy the code

function pause(){
    document.querySelector('div').style.animationPlayState="paused"
}
function run(){
    document.querySelector('div').style.animationPlayState="running"
}
Copy the code

The default value of animation-play-state is RUNNING, which means animation execution. In practical applications, we often use JS to operate this property, so as to control the playback and suspension of animation.

Today we have learned a total of eight property values, all of which belong to animation property. Here is the shorthand of property values in animation.

animation: name duration timing-function delay iteration-count direction play-state;

div{
    animation:mymove 2s ease-in-out 3s infinite alternate running;
}
Copy the code

So what this means is that the MyMove animation will start after three seconds, and the animation will be shown in a two-second slow-fast-slow loop, and after each animation will be executed in the opposite direction.

conclusion

After the above study, I believe that you have a preliminary understanding of the usage of animation. With a deeper understanding of animation, you can make some creative animations. You can look at the various animations you have written with JS before and try to modify them with what we have learned in the two articles. You will have a better understanding of these two properties.

But now that we’ve only learned transitions and animations, we can’t just do a series of irregular operations on shapes yet, and a transform is what translates into a particular shape. I’ll continue to translate and transform in the next article. Follow my lead. Join me in mastering CSS animation in 2020!

conclusion

The above is the whole content of this article, if there are incorrect places welcome to correct.

Thank you for reading. If you find it useful, please like it/forward it.

Front-end in-depth series is a pit series, which is an exploration and summary of the problems AND pits I have encountered in work and study. It is recorded and shared here, and also a reflection and questioning of my skills.

The front end road is diffuse, step pit ceaseless.

Front-end in-depth series continues to be updated…

More than 2019-10-24.