CSS animation Property

Definition and Usage

animation The attribute is a shorthand attribute used to set six animation properties:

Note:Always specify animation-duration If the attribute is not specified, the animation will not play if the duration is 0.

Use the shorthand property to bind the animation to the div element:

div
{
animation:mymove 5s infinite;
}

animation: name duration timing-function delay iteration-count direction;

Value	Description
animation-name	Specifies the name of the keyframe to be bound to the selector.
animation-duration	Specifies the time taken to complete the animation, in seconds or milliseconds.
animation-timing-function	Specifies the speed curve of the animation.
animation-delay	Specifies the delay before the animation starts.
animation-iteration-count	Specifies the number of times the animation should play.
animation-direction	Specifies whether the animation should play in reverse alternately.
animation-fill-mode	Specifies the value applied outside the execution time of the animation.
animation-play-state	Specifies whether the animation is running or paused.

Default Value:	none 0 ease 0 1 normal
Inheritance:	no
Version:	CSS3
JavaScript Syntax:	object.style.animation="mymove 5s infinite"

The numbers in the table indicate the first browser version that fully supports the property.

Numbers with -webkit-, -moz-, or -o- prefixes indicate the first version of the prefix used.

Chrome	IE / Edge	Firefox	Safari	Opera
Chrome	Edge	Firefox	Safari	Opera
43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-