CSS3 animation property

Definitions and usages

The animation property is a shorthand property for six animation properties:

Note: Always specify the animation-duration property, otherwise the animation will not play if the duration is 0.

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

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

Value	Describe
animation-name	Specifies the keyframe name that needs to be bound to the selector.
animation-duration	Specify the time it takes to complete the animation, in seconds or milliseconds.
animation-timing-function	Specifies the speed curve of the animation.
animation-delay	Specify the delay before the animation starts.
animation-iteration-count	Specifies the number of times the animation should be played.
animation-direction	Specify whether the animation should be played back in turn.

Use short-case properties to bind the animation to the div element:

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

Attributes
animation	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-

Internet Explorer 10, Firefox, and Opera support the animation property.

Safari and Chrome support alternative -webkit-animation properties.

Note: The animation property is not supported by Internet Explorer 9 and earlier versions.

CSS3 tutorial: CSS3 animation