Introduction to CSS3 Animation animation properties

Animation Animation Properties Introduction

The animation property is a shorthand property that sets the animation properties:

1. animation-name----Specifies the keyframe name to bind to the selector.

Syntax: Animation-name:keyframename|none;

Keyframename: Specifies the name of the Keyframe that needs to be bound to the selector .

None: Specifies no animation effect (can be used to override 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 amount of time, in seconds or milliseconds, that the animation will take to complete.

Syntax: Animation-duration:time;

Time: Specifies how long it takes to complete the animation. The default value is 0, which means there is no animation effect.

For example:

{

-webkit-animation-duration:2s;

-moz-animation-duration:2s;

-ms-animation-duration:2s;

-o-animation-duration:2s;

Animation--duration:2s;

}

3. Animation-timing-function----Set the speed curve of the animation

Syntax:animation-timing-function:value;

value :

Linear: The speed of the animation is the same from beginning to end.

Ease: Default. The animation starts at low speed, then accelerates and slows down before it ends.

Ease-in: The animation starts at low speed.

Ease-out: The animation ends at low speed.

Ease-in-out: Animations start and end at low speed.

Cubic-bezier (n,n,n,n): its own value in the cubic-bezier function. The possible values are numbers from 0 to 1 .

For example:

{animation-timing-function:linear;}

{animation-timing-function:ease;}

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

{animation-timing-function:ease-out;}

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

4. Animation-delay----The delay before the start of the animation

Syntax:animation-delay:time;

Time value: Optional. Defines the time, in seconds or milliseconds, to wait before the animation starts. The default value is 0. allow negative values,-2s start the animation immediately, but Skip 2 seconds to enter the animation.

{

Animation-delay:2s;

-webkit-animation-delay:2s;

}

5. animation-iteration-count----Specify the number of times the animation should play

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

N: Defines the number of times the animation plays.

Infinite: Specifies that animations should be played on an unlimited number of times. The default value is:1.

Example:

{

Animation-iteration-count:infinite;

-webkit-animation-iteration-count:infinite;

}

6. animation-direction----Whether the animation should be rotated in reverse

Syntax:animation-direction:normal|alternate;

Normal: Default value. The animation should play normally.

Alternate: animations should rotate backwards.

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

Example:

{

Animation-direction:alternate;

-webkit-animation-direction:alternate;

}

7. Animation-play-state property specifies whether the animation is running or paused

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

Paused: Specifies that the animation is paused.

Running: Specifies that the animation is playing.

Note: You can Use this property in JavaScript so that you can pause the animation during playback.

Example:

{

animation-play-state:running;

-webkit-animation-play-state:running;

}

8. The Animation-fill-mode property specifies whether animations are visible before or after the animation is played

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

None: Does not change the default behavior.

Forwards: When the animation is complete, keep the last property value (defined in the last Keyframe).

Backwards: applies the start attribute value (defined in the first keyframe) for a period of time specified by Animation-delay before the animation is displayed.

Both: both forward and backward fill modes are applied.

Introduction to CSS3 Animation animation properties