The most commonly used properties of animation are the following:
1. animation-name
The animation-name attribute must exist, because the value of animation-name is none by default, and there is no animation.
2. animation-duration (time required for animation to execute once)
The animation-duration attribute must also exist, because the value of animation-duration is 0 by default, and there is no animation.
3. animation-delay (the delay time of the animation before the start)
The value of animation-delay can be seconds (s) or milliseconds (ms), the default value is 0, no delay.
4. animation-timing-function (the running track of animation to complete a cycle)
The value of animation-timing-function is a Bezier curve, the default value is ease, which means that the animation starts at a low speed, then accelerates, and finally slows down before ending. The most commonly used values are the following:
(1) linear: indicates that the speed of the animation is the same from beginning to end.
(2) ease-in: indicates that the animation starts at a low speed.
(3) ease-out: indicates that the animation ends at a low speed.
(4) ease-in-out: indicates that the animation starts and ends at a low speed.
If there is no value you want to use, you can also use the cubic Bessel function directly. The website is http://cubic-bezier.com, you can directly debug the value you want; you can also debug directly in the browser Visual debugging of Bessel functions is supported in browser debugging tools.
5. animation-iteration-count (number of animation plays)
There are two types of animation-iteration-count property values:
(1) Write numbers directly and customize the number of times you want to play the animation.
(2) infinite: Set the animation to loop wirelessly.
6. animation-fill-mode (define element style after element animation ends or does not start)
The default value is none, which indicates that the element will not be styled when the animation ends or does not start
Common attribute values are:
(1) forwards: After the animation ends, the element directly uses the current style.
(2) backwards: indicates that the animation delay time element uses the attribute value or from attribute value in the key frame (when animation-direction is reverse or alternate-reverse)
7. animation-direction (whether to play animation in reverse)
The default value is normal, and the animation plays normally. If the animation is played only once, this attribute has no effect.
Commonly used attribute values are:
(1) reverse: indicates that the animation plays in reverse.
(2) alternate: indicates that the animation is played in the forward direction when it is played an odd number of times and in the reverse direction when it is played evenly.
(3) alternate-reverse:: indicates that the animation is played in reverse when it is played an odd number of times, and it is played in a forward direction when it is played an even number of times.
Animation properties are usually combined when writing, unless the property value needs to be set separately. The short form of the animation property is: animation: code 2s 2s linear infinite alternate forwards;
