animation
Goal: use animation to add animation effects
grammar:
1. Define the animation:
@keyframes animationName{
from{ }
to { }
}
or
@keyframes animationName{
0% { }
10% { }
15% { }
100% { }
}
2. Use animation
animation: animation name animation duration;
animation: animation name, animation time, speed curve, delay time, number of repetitions, state after the animation direction is executed;
Speed curve writing: linear uniform speed steps (3) step by step
Repeat times math: infinite infinite loop
Animation direction writing: alternate has animation in both directions
The state of the completion of execution: backwards default value, the animation stays in the initial state
The forwards animation stays in the end state
Note:
Animation name and animation market must be assigned
Values are in no particular order
If there are 2 time values, the first time represents the animation duration, and the second time represents the delay time
Frame by frame animation:
Goal: Use steps to achieve frame-by-frame animation (generally cooperate with sprite images to achieve animation effects)
animation: XXX XXXX steps(N);
animation-timing-function:steps(N);
Divide the animation process into N equal parts