Style animation property

Definition and Usage

animation The property is a shorthand for six animation properties:

Note:Always specify animationDuration propertyOtherwise, the duration is 0, and it will never play.

Example

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

document.getElementById("myDIV").style.animation = "mynewmove 4s 2";

Try it yourself

Syntax

Return animation properties:

object.style.animation

Set animation properties:

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

Attribute value

Value Description
animationName Specifies the name of the keyframes to be bound to the selector.
animationDuration Specifies how many seconds or milliseconds the animation needs to complete.
animationTimingFunction Specifies the speed curve of the animation.
animationDelay Specifies the delay before the animation starts.
animationIterationCount Specifies how many times the animation should play.
animationDirection Specifies whether the animation should be played in reverse during the alternate cycle.
animationFillMode Specifies the value applied to the animation outside of the execution time.
animationPlayState Specifies whether the animation is running or paused.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical details

Default value: none 0 ease 0 1 normal none running
Return value: A string that represents the element's animation properties.
CSS version: CSS3

Browser support

animation is a CSS3 (1999) feature.

All browsers fully support it:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Support Support Support Support Support 11

Related pages

CSS Reference Manual:animation properties