1.animation-name: animation name
2.@keyframes: animation definition, followed by animation name
3.animation-duration: animation duration, unit (s)
4.animation-delay: animation delay, unit (s); It can be a negative value. When it is a negative value, it should be interpreted as having played for n seconds.
For example: -2s means that the animation has been played for 2s, and it will start playing after 2s
. (infinite loop)
6.animation-direction: animation running direction rules: reference values are:
① normal (normal play, default value),
② reverse (reverse),
③ alternate (first forward, then reverse, alternate),
④ alternate-reverse (reverse first, then forward, alternate)
7.animation-timing-function: Animation running curve, reference values are:
① ease: slow-fast-slow
② linear: uniform movement
③ ease-in: slow In
④ ease-out: Slow out
⑤ ease-in-out: Slow in and out
⑥ cubic-bezier(n,n,n,n): Customize animation running curve with Bessel function
8.animation-fill-mode: Animation fill mode:
① none: default value, no style is applied
② forwards: apply the style value of the last keyframe of the animation
③ backwards: apply the style value of the first keyframe of the animation, and The value is preserved during animation delays.
④ both animation will follow the rules of forward and backward at the same time, so as to expand the animation properties in both directions
9.animation-play-state: animation running or pause
① paused: pause
② running:
play Animation shorthand properties, sequence: animation name, running time, running curve, delay, running times, running direction rules