Must master the 8 big attributes of the CSS3 animation (Animation)

Animation composite properties. Retrieves or sets the animation effect applied to an object.

If there are multiple attribute values separated by ",", applies to all elements, including pseudo-objects: after and: Before

1.animation-name retrieves or sets the name of the animation to which the object is applied

Must be used in conjunction with the rule @keyframes, eg: @keyframes animations animation-name:animations;

2.animation-duration to retrieve or set the duration of an object animation

animation-duration:3s; The animation is completed using a time of 3s

3.animation-timing-function to retrieve or set the transition type of an object animation

Linear: Linear transition. Equivalent to Bezier curve (0.0, 0.0, 1.0, 1.0)

Ease: smooth transitions. Equivalent to Bezier curve (0.25, 0.1, 0.25, 1.0)

Ease-in: from slow to fast. Equivalent to Bezier curve (0.42, 0, 1.0, 1.0)

Ease-out: From fast to slow. Equivalent to Bezier curve (0, 0, 0.58, 1.0)

Ease-in-out: From slow to fast to slow. Equivalent to Bezier curve (0.42, 0, 0.58, 1.0)

Step-start: Equivalent to Steps (1, start)

Step-end: Equivalent to Steps (1, end)

Steps (<integer>[, [start | end]]?) : A step function that accepts two parameters. The first argument must be a positive integer that specifies the number of steps for the function. The second parameter value can be start or end, specifying the point in time at which the value of each step changes. The second parameter is optional and the default value is end.

Cubic-bezier (<NUMBER>, <number>, <number>, <number>): Specific Bezier type, 4 values in [0, 1] Range

4.animation-delay retrieving or setting the time for object animation delay

animation-delay:0.5s; 0.5s delay before animation starts

5.animation-iteration-count retrieves or sets the object animation Loops number of

Animation-iteration-count:infinite | Number

Infinite: Infinite loop

Number: Count of loops

6.animation-direction retrieves or sets whether an object animation moves backwards in a loop

Normal: Regular direction

Reverse: Running in the opposite direction

Alternate: Animation runs normally and then runs in opposite directions and runs continuously alternately

Alternate-reverse: Animation runs in reverse direction and runs continuously alternately

7.animation-play-state retrieving or setting the state of an object animation

animation-play-state:running | Paused

Running: Sports

Paused: Pause

animation-play-state:paused; The animation stops when the mouse passes, and the mouse moves away to continue

8.animation-fill-mode retrieves or sets the state outside the object's animation time

None: Default value, do not set state outside of object animation

Forwards: Sets the state of the object at the end of the animation

Backwards: Sets the state of the object when the animation starts

Both: Sets the state of the object when the animation starts or ends

"Recommended"

1. Detailed description of the Animation-direction attribute in CSS3

2. Share a listener CSS3 animation (animation) End Event instance

3. Using the animation attribute to implement the time-lapse execution Example tutorial

4. Explain the two types of suspension in CSS3 (transition, animation)