the second is called keyframe (keyframes) animation. The transition animation, which is different from the first one, can only define the two states of the first and the end. The key frame animation can define multiple states, or, in the case of key frames, the transition animation can only define the two key frames of the first frame and the last frame, while the key frame animation can define any number of key frames so that the more complex motion can be realized. Painting effect. The definition of
keyframe animation is also very special. It uses a keyword @keyframes to define animation. The specific format is:
@keyframes animation name {
time point {element status}
time point {element status}
...
}
, for example:
this code defines an animation named demo with 5 key frames. 0%, 10% and so on are the points of time relative to the duration of the whole animation. The parenthesis after the time point is the state attribute set of the element, describing the state of the element at the point of time. When the animation occurs, it is the transition from the first state to the second state, and then from the first state. Two states to third States to transition until the last state. Generally speaking, 0% and 100% two key frames must be defined.
key frames are flexible in writing, and one line can write multiple key frames.
even the space between them can be not.