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.


Syntax:

CSS3 animation property. internetexplorer safari firefox opera chrome

View in Splitscreen»

Code-Editor:

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

Specifications

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 object.style.animation="shake 5s infinite"
Inherited No
Computed Value Same as declared value
Browser Support internetexplorer safari firefox opera chrome


Related Examples.