CSS animation Property

❮ Previous Reference Next ❯


div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: myDiv 5s infinite;

@keyframes myDiv {
  from {left: 0px;}
  to {left: 200px;}


The animation shorthand CSS property applies an animation between styles.

It is a shorthand for:

Default value:none 0 ease 0 1 normal none running
JavaScript syntax:
object.style.animation="[ name duration timing-function delay iteration-count direction fill-mode play-state ] | initial | inherit|revert|revert-layer|unset";

Standard Syntax

animation: [ name duration timing-function delay iteration-count direction fill-mode play-state ] | initial | inherit|revert|revert-layer|unset;

Browser Support

The numbers in the table specify the first browser version that fully supports the property.


Property Values

The following table describes the values of this property.

Value Description
animation-name Specifies the name of @keyframes defined animations that should be applied to the selected element.
animation-duration Specifies how many seconds or milliseconds that an animation takes to complete one cycle of the animation.
animation-timing-function Specifies how the animation will progress over the duration of each cycle i.e. the easing functions.
animation-delay Specifies a delay before the animation will start.
animation-iteration-count Specifies the number of times an animation cycle should be played before stopping.
animation-direction Specifies whether or not the animation should play in reverse on alternate cycles.
animation-fill-mode Specifies how a CSS animation should apply styles to its target before and after it is executing.

Specifies whether the animation is running or paused.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.

Default CSS Property Values

selectors {
  animation: none 0 ease 0 1 normal none running;

More Examples

The following example uses six animation properties:


div {
  animation-name: demo;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;

The following example apply same animation by using the shorthand animation property:


div {
  animation: demo 5s ease-in-out 2s infinite alternate;
❮ Previous Reference Next ❯