Easy Tutorial
❮ Jsref Toutcstring Prop Style Liststyletype ❯

Style animation Property

Style Object

Example

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


Definition and Usage

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

animationName

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


Browser Support

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.


Syntax

Return the animation property:

Set the animation property:

Property Values

Value Description
animationName Specifies the name of the keyframe to bind to the selector.
animationDuration Specifies the length of time it takes for an animation to complete one cycle.
animationTimingFunction Specifies the speed curve of the animation.
animationDelay Specifies the delay before the animation will start.
animationIterationCount Specifies the number of times an animation should be played.
animationDirection Specifies whether or not the animation should play in reverse on alternate cycles.
animationFillMode Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both).
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, representing the animation property of the element.
--- ---
CSS version CSS3
--- ---

Related Articles

CSS Reference: animation Property


Style Object

❮ Jsref Toutcstring Prop Style Liststyletype ❯