Style animation Property

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

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

Description

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

Note: Always specify the animationDuration property, otherwise the duration is 0, and will never be played.

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 keyframe you want to bind 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 a delay before the animation will start
animationIterationCount	Specifies how many times an animation should be played
animationDirection	Specifies whether or not the animation should play in reverse on alternate cycles
animationFillMode	Specifies what values are applied by the animation outside the time it is executing
animationPlayState	Specifies whether the animation is running or paused
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

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

animation is a CSS3 (1999) feature.

It is fully supported in all browsers:


Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	11