Style animation Property

Examples

Use the shorthand property to change the animation of a <div> element:

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 the WebkitAnimation property, an alternative to this 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"

Valor	Description
animationName	Specifies the name of the keyframes to be bound to the selector.
animationDuration	Specifies how many seconds or milliseconds an animation takes to complete.
animationTimingFunction	Specifies the speed curve of the animation.
animationDelay	Specifies the delay time for the animation to start.
animationIterationCount	Specifies the number of times an animation should be played.
animationDirection	Specifies whether the animation should be played in reverse alternately.
animationFillMode	Specifies the style to be applied 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

CSS Reference Manual:animation property

Other Extensions