Search within TutorialsPark

CSS3 animation Property

A Shorthand to set multiple animation properties in a single declaration .

Definition and Notes.

1. The CSS animation property is used to set multiple animation properties, seperated by comma, in a single declaration.

2. The properties can appear in any order, but caution must be observed by specifying the delay and duration values.


CSS3 animation property. internetexplorer safari firefox opera chrome

View in Splitscreen»


Note- The value of animation-duration must be set always, or else it will be set or default value of zero, hence no animation.

Property Values

Value Description
animation-name To specify the name of the animation
animation-duration To specify whether the animation should be played backwards on alternate cycles
animation-timing-function The offset is set using the length values.(px cm em pt etc)
animation-delay To set the delay before the animation begins
animation-iteration-count To set the number of times that the animation will be performed
animation-direction To specify whether the animation should be played backward on alternate cycles
animation-fill-mode To specify how an animated element should be styled at the beginning or at the end of animation
animation-play-state It allows the animation to be paused and resumed


Specs Value
Name animation
Value <single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode>
Initial Value Refer to individual properties
Applies to block-level and inline-level elements
Javascript syntax"shake 5s infinite"
Inherited No
Computed Value Same as declared value
Browser Support internetexplorer safari firefox opera chrome

Related Examples.