Css3 animation attributes, css3animation

Css3 animation attributes, css3animation

Animation attributes

 

The animation attribute is a short attribute used to set animation attributes:

1. Animation-name ---- specifies the keyframe name to be bound to the selector.

Syntax: animation-name: keyframename | none;

Keyframename: Specifies the name of the keyframe to be bound to the selector.

None: specifies that there is no animation effect (it can be used to overwrite animations from cascading ).

 

For example:

{

-Webkit-animation-name: my_animation;

-Moz-animation-name: my_animation;

-Ms-animation-name: my_animation;

-O-animation-name: my_animation;

Animation-name: my_animation;

}

@-Webkit-keyframes my_animation {}

@-Moz-keyframes my_animation {}

@-Ms-keyframes my_animation {}

@-O-keyframes my_animation {}

@ Keyframes my_animation {}

 

2. animation-duration-specifies the time taken to complete the animation, in seconds or milliseconds.

Syntax: animation-duration: time;

Time: specifies the time taken to complete the animation. The default value is 0, indicating no animation effect.

For example:

{

-Webkit-animation-duration: 2 s;

-Moz-animation-duration: 2 s;

-Ms-animation-duration: 2 s;

-O-animation-duration: 2 s;

Animation -- duration: 2 s;

}

3. animation-timing-function-specifies the animation speed curve

Syntax: animation-timing-function: value;

Value:

Linear: the animation speed is the same from start to end.

Default: the default value. The animation starts at low speed, then accelerates, and slows down before the end.

Animated-in: the animation starts at low speed.

Animation-out: the animation ends at low speed.

Starting-in-out: the animation starts and ends at low speed.

Cubic-besuppliers (n, n): the values of these functions. The possible value is a value ranging from 0 to 1.

For example:

{Animation-timing-function: linear ;}

{Animation-timing-function: animation ;}

{Animation-timing-function: animation-in ;}

{Animation-timing-function: timed-out ;}

{Animation-timing-function: animation-in-out ;}

 

4. animation-delay-specifies the latency before the animation starts.

Syntax: animation-delay: time;

Time Value: Optional. Defines the waiting time before the animation starts, in seconds or milliseconds. The default value is 0. Negative values are allowed. The animation starts immediately in-2 s, but the animation is skipped for 2 seconds.

{

Animation-delay: 2 s;

-Webkit-animation-delay: 2 s;

}

 

5. Animation-iteration-count ---- specifies the number of times the animation should be played

Syntax: animation-iteration-count: n | infinite;

N: specifies the number of playback times of an animation.

Infinite: specifies that the animation should be played infinitely. The default value is 1.

Example:

{

Animation-iteration-count: infinite;

-Webkit-animation-iteration-count: infinite;

}

6. Animation-direction-Specifies whether an animation should be played reversely in turn

Syntax: animation-direction: normal | alternate;

Normal: default value. The animation should be played normally.

Alternate: the animation should be played back in turn.

Note: If you set the animation to play only once, this attribute has no effect.

Example:

{

Animation-direction: alternate;

-Webkit-animation-direction: alternate;

}

7. The animation-play-state attribute specifies whether the animation is running or paused.

Syntax: animation-play-state: paused | running;

Paused: specifies that the animation has been paused.

Running: specifies that the animation is playing.

Note: This attribute can be used in JavaScript to pause the animation during playback.

Example:

{

Animation-play-state: running;

-Webkit-animation-play-state: running;

}

8. The animation-fill-mode attribute specifies whether the animation effect is visible before or after playback.

Syntax: animation-fill-mode: none | forwards | backwards | both;

None: do not change the default behavior.

Forwards: When the animation is complete, keep the last attribute value (defined in the last key frame ).

Backwards: Apply the start attribute value (defined in the first key frame) before the animation is displayed within the period specified by animation-delay ).

Both: both the forward and backward fill modes are applied.