CSS3 `animation` Property

Example

Using the shorthand property to bind an animation to a <div> element:

div {
    animation: mymove 5s infinite;
    -webkit-animation: mymove 5s infinite; /* Safari and Chrome */
}

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

Numbers followed by -webkit-, -ms-, or -moz- specify the first version that supported the prefixed property.

Property	Chrome	IE	Firefox	Safari	Opera
animation	43.0 <br>4.0 -webkit-	10.0	16.0 <br>5.0 -moz-	9.0 <br>4.0 -webkit-	30.0 <br>15.0 -webkit- <br>12.0 -o-

Default value:	none 0 ease 0 1 normal
Inherited:	no
---	---
Version:	CSS3
---	---
JavaScript syntax:	`object.style.animation="mymove 5s infinite"`
---	---

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

Value	Description
animation-name	Specifies the name of the keyframe to bind to the selector.
animation-duration	Specifies how long the animation should take to complete one cycle.
animation-timing-function	Sets how the animation will progress over one cycle of its duration.
animation-delay	Sets the delay between the time the element is loaded and the beginning of the animation sequence.
animation-iteration-count	Defines the number of times an animation should be played.
animation-direction	Specifies whether or not the animation should play in reverse on alternate cycles.
animation-fill-mode	Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both).
animation-play-state	Specifies whether the animation is running or paused.
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit