Style animation Property

Example

Change the animation of a <div> element using the shorthand property:

document.getElementById("myDIV").style.animation="mymove 5s infinite";

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

animationName
animationDuration
animationTimingFunction
animationDelay
animationIterationCount
animationDirection.

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

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

Safari and Chrome support an alternative property, the WebkitAnimation property.

Note:Internet Explorer 9 and earlier versions do not support the animation property.

Return the animation property:

object.style.animation

Set the animation property:

object.style.animation="name duration timingFunction delay iterationCount direction fillMode playState"

Value	Description
animationName	Specifies the name of the keyframes to bind to the selector.
animationDuration	Specifies the number of seconds or milliseconds the animation takes to complete.
animationTimingFunction	Specifies the speed curve of the animation.
animationDelay	Specifies the delay before the animation starts.
animationIterationCount	Specifies the number of times the animation is played.
animationDirection	Specifies whether the animation should be played in reverse alternately in cycles.
animationFillMode	Specifies the style to apply to the element when the animation is not playing (when the animation has completed, or when the animation has a delay and has not started playing).
animationPlayState	Specifies whether the animation is running or paused.
initial	Sets this property to its default value. Seeinitial。
inherit	Inherits this property from its parent element. Seeinherit。

Default Value:	none 0 ease 0 1 normal none running
Return Value:	A string representing the animation property of an element.
CSS Version	CSS3

Other Extensions