2.0%{ Attribute: Value; } 100%{ Attribute: value; 0% is the beginning of animation, and 100% is the completion of animation. You can add 25%, 50% and so on between the two.

3. Bind the animation to the selector: In the style, set the animation attribute animation, and customize the animation name and duration.

4. Specify the waiting time at the start of animation: animation-delay: time; It can be seconds, milliseconds, 2s, 2ms.

5. Playback times: animation-iteration-counting: times; The value of perpetual games is infinite.

6. Animation speed curve: animation-timing-function: changing types; The change types are: linear uniform speed; Fading in starts slowly; Relax and end slowly; Comfort? Animation has a slow start and then ends quickly and slowly.

Extended data

Animation attribute is a shorthand attribute, which is used to set six animation attributes:

1, animation name

Specifies the name of the keyframe that needs to be bound to the selector.

2. Animation-Duration

Specifies the time required to complete the animation, in seconds or milliseconds.

3. Animation-Timing-Function

Specifies the speed curve of the animation.

4, animation delay

Specifies the delay before the animation starts.

5. Animation-Iteration-Counting

Specifies the number of times the animation should be played.

6. Animation director

Specifies whether the animation should be played in reverse.

Note: Please always specify the animation-duration attribute, otherwise the animation will not play if the duration is 0.