CSS animation Property

The animation property is a shorthand property for setting the value of longhand animation properties — animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode and animation-play-state.

The value of longhand properties should separated by a space. The order of the properties doesn’t matter as long as you are not using both animation-duration and animation-delay in a single animation. When both these values are specified, the first one will be considered the animation duration, and the second one will be considered the animation delay.

Also make sure that you don't set the value of animation-name property to be equal to any of the valid values for other animation propertis. This will create a conflict and instead of setting an animation name, you will be setting the value of respective longhand animation property.

You should keep in mind that the actual animation is defined by using the @keyframes rule which is then controlled by the values you specify in the animation property.

The initial value of this property is equal to the initial value of each of the longhand properties. You can apply this property to all elements as well as ::before and ::after pseudo-elements. This property is not inheritable.

Syntax

This is the formal syntax for using animation property —

animation: <single-animation>

/* where */  
<single-animation> = <time> || <timing-function> || <time> || <animation-iteration-count> || <animation-direction> || <animation-fill-mode> || <animation-play-state> || <animation-name>

Here are some examples of using this property —

/* @keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */
animation: 5s ease-in 2.5s 10 reverse both paused jump;  

/* @keyframes duration | timing-function | delay | name */
animation: 5s ease-out 2.5s jump;  

/* @keyframes duration | name */
animation: 3s jump;

Acceptable Values

This property accepts one or more comma-separated animation definitions. Each animation is defined using the longhand animation properties that we discussed above. You can read more about these longhand properties on their respective webpages.

Examples

In the following example, the ball is moving from left to right with the help of animation property.

.circle {
    animation: 4s linear 0s infinite alternate left_right;
}

@keyframes left_right {
  from {
    left: 20px;
    background: orange;
  }
  to {
    left: calc(100% - 160px);
    background: red;
  }
}

The values in above animation are given in the following order — duration | timing-function | delay | iteration-count | direction | name. A detailed explanation of all these values is given in the CSS reference.

See the Pen CSS animation Property by Tutorialio (@tutorialio) on CodePen.

Browser Support

The CSS Animation property is fully supported in 93.99% browsers.

This property is partially supported in Android 3+ and fully supported in IE 10+, Edge 12+, Firefox 16+, Chrome 43+, Safari 9+, Opera 30+, iOS Safari 9.0-9.2+, Android 53+ and Chrome for Android 55+.

Other Issues

  • animation-fill-mode property is not supported in Android browser below 2.3.
  • iOS 6.1 and below do not support animation on pseudo-elements.
  • iOS 7 and higher are reported to have buggy behavior with animating pseudo-elements.
  • @keyframes not supported in an inline or scoped stylesheet in Firefox (bug 830056)
  • In Chrome animation-fill-mode backwards is wrong if steps(x, start) is used see example.
  • IE10 and IE11 do not support CSS keyframe blocks inside media queries. Must be defined outside of media query definitions. example
  • IE10 and IE11 on Windows 7 have a bug where translate transform values are always interpreted as pixels when used in animations test case.
  • IE10 and IE11 will not fire Animation events for pseudo element animations. See example here.

The browser stats and issues were taken from caniuse.com

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top