animation

The animation property is shorthand for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.

Syntax

The animation-duration property must always be specified or else the duration will default to 0 and the animation will never be displayed.

/*
    wrap <code> tags inside <pre> tags to create code blocks like this
*/

Values

animation-name
Specify the name for the @keyframes animation.

animation-duration
Specifies how long an animation should take to complete a full cycle.

animation-timing-function
Designates the speed curve of an animation.

animation-delay
Sets a delay for the start of an animation. This value is defined in seconds or milliseconds.

animation-iteration-count
Specifies how many times an animation should be played.

animation-direction
Sets whether an animation should be played forwards, backwards, or both alternating.

animation-fill-mode
Designates a style for the element before the animation starts, after it ends, or both.

animation-play-state
Specifies whether the animation is running or paused.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

User-submitted codepen.io examples of animation ↴

@marccurtis321

See the Pen on CodePen.

reply?

Want to Contribute?

Submit a codepen.io link that demonstrates animation: