The animation property allows you to give animations to HTML elements. Animations in CSS allow you to change the state of an element.
It is a shorthand property for eight animation properties - animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode and animation-play-state.
CSS
animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];
There is no specific order in which the values are given in the declaration, except the order of animation-duration and animation-delay. Therefore, whenever two time values are given to the shorthand property, the first value corresponds to the animation duration and the second value corresponds to the animation delay. Also, it is not necessary to give all the values.
See the Pen CSS animation example by Aakhya Singh (@aakhya) on CodePen.
Note: For animations to be effective, it is necessary to define the animation-duration property because the duration of animations is zero by default.
Values
The possible values which can be given for these longhand properties are given below.
animation-name
This is used to specify the name(s) of one or more animations defined by @keyframes rules to be applied to the specified element. It can take one of the following values. Its default value is none.
<animation_name> | none
See the Pen CSS animation example by Aakhya Singh (@aakhya) on CodePen.
Click on the RERUN button in the above demo to see the animation.
animation-duration
This is used to specify the time that an animation takes to complete one cycle. It is used to speed up or slow down animations. It can take the following value. Its default value is 0s.
<time>
See the Pen CSS animation example by Aakhya Singh (@aakhya) on CodePen.
Click on the RERUN button in the above demo to see the animation.
animation-timing-function
This is used to define the pattern of speed of the animation applied to an element over time by specifying a speed curve function. It allows you to define how the speed of an animation will change in one cycle. It can take one of the following values. Its default value is ease.
ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<int>, start|end) | cubic-bezier(<n,n,n,n>)
See the Pen CSS animation example by Aakhya Singh (@aakhya) on CodePen.
Click on the RERUN button in the above demo to see the animation.
animation-delay
This is used to specify the time after which an animation starts. It can take the following value. Its default value is 0s.
<time>
See the Pen CSS animation example by Aakhya Singh (@aakhya) on CodePen.
Click on the RERUN button in the above demo to see the animation.
In the above demo, 2s is the animation-duration value and the values written after it specify the animation-delay values.
animation-iteration-count
This is used to specify the number of times an animation cycle plays. It can take one of the following values. Its default value is 1.
<number> | infinite
See the Pen CSS animation example by Aakhya Singh (@aakhya) on CodePen.
Click on the RERUN button in the above demo to see the animation.
animation-direction
This is used to specify whether an animation plays forwards, backwards or a combination of the two. It can take one of the following values. Its default value is normal.
normal | reverse | alternate | alternate-reverse
See the Pen CSS animation example by Aakhya Singh (@aakhya) on CodePen.
Click on the RERUN button in the above demo to see the animation.
animation-fill-mode
This is used to specify the styles to be applied to the specified element when the animation is not being played, i.e., before the start and after the end of the animation. It can take one of the following values. Its default value is none.
none | forwards | backwards | both
See the Pen CSS animation example by Aakhya Singh (@aakhya) on CodePen.
Click on the RERUN button in the above demo to see the animation.
animation-play-state
This is used to specify whether an animation is running or paused. Its default value is running.
running | paused
See the Pen CSS animation example by Aakhya Singh (@aakhya) on CodePen.
Click on the RERUN button in the above demo to see the animation.
Apart from these, the animation property can also take the following universal values.
initial : Sets the default value of the property.
inherit : Inherits the value from parent element.
Example
See the Pen CSS animation example by Aakhya Singh (@aakhya) on CodePen.
The declaration used in the above demo is equivalent to the following individual declarations.
animation-name: move;
animation-duration: 4s;
animation-timing-function: ease; /* default value */
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: none; /* default value */
animation-play-state: running; /* default value */
Giving different animations to an element
To give multiple animations, give multiple comma-separated set of values to the animation property.
Look at the following code.
HTML
<div></div>
CSS
@keyframes slide {
@keyframes reshape{
0% { border-radius: 50%; }
50% { border-radius: 0%; }
100% { border-radius: 50%; }
}
@keyframes colorChange{
0% {background-color: green;}
0% {background-color: yellow;}
100% {background-color: green;}
}
div {
width: 150px;
height: 150px;
background-color: #8f5656;
border-radius: 50%;
-webkit-animation: reshape 1s, /* first animation */
colorChange 2s infinite; /* second animation */
animation: reshape 1s, /* first animation */
colorChange 2s infinite; /* second animation */
}
In this code, two animations named "reshape" and "colorChange" are defined. These two animations are given to a div by giving a set of values for each animation separated by a comma to the animation property.
See the Pen CSS animation example by Aakhya Singh (@aakhya) on CodePen.
Click on the RERUN button in the above demo to see the animation from beginning.
Browser Support
This property is not supported in IE 10 and its earlier versions.
