Loading lesson path
This page covers the CSS animation direction, fill mode, and the shorthand property.
The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles.
Formula
The animation - direction property can have the following values:normal - The animation is played as normal (forwards). This is default reverse - The animation is played in reverse direction (backwards) alternate
Formula
- The animation is played forwards first, then backwards alternate - reverseExample div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;Formula
animation - direction:reverse;
}
The following example uses the value "alternate" to make the animation run forwards first, then backwards:Example div {
width: 100px;
height: 100px;
position: relative;
background-color: red;Formula
animation - name:myAnimation;
animation-duration: 4s;
animation-iteration-count: 2;Formula
animation - direction:alternate;
}Formula
The following example uses the value "alternate - reverse" to make the animation run backwards first, then forwards:Example div {
width: 100px;
height: 100px;
position: relative;
background-color: red;Formula
animation - name:myAnimation;
animation-duration: 4s;
animation-iteration-count: 2;Formula
animation - direction:alternate-reverse;
}CSS animations do not affect an element before the first keyframe is played or after the last keyframe is played. The animation-fill-mode property can override this behavior. The animation-fill-mode property specifies a style for the target element when the animation is not playing (before it starts, after it ends, or both).
Formula
The animation - fill - mode property can have the following values:none - Default value. Animation will not apply any styles to the element before or after it is executing forwards - The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count) backwards - The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period both - The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions
Formula
The following example lets the < div > element retain the style values from the last keyframe when the animation ends:Example div {
width: 100px;
height: 100px;
background: red;
position: relative;Formula
animation - name:myAnimation;
animation-duration: 3s;
animation-fill-mode: forwards;
}
The following example lets the <div> element get the style values set by the first keyframe before the animation starts (during the animation-delay period):Example div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: myAnimation;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
}The following example lets the <div> element get the style values set by the first keyframe before the animation starts, and retain the style values from the last keyframe when the animation ends:
Example div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: myAnimation;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}The example below uses six of the animation properties:
{
animation-name: myAnimation;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}The same animation effect as above can be achieved by using the shorthand animation property:
{
animation: myAnimation 5s linear 2s infinite alternate;
}The following table lists the @keyframes rule and all the CSS animation properties:
@keyframes
Formula
A shorthand property for setting all the animation properties animation - delay
Specifies a delay for the start of an animation animation - direction
Specifies whether an animation should be played forwards, backwards or in alternate cycles animation - duration
Specifies how long time an animation should take to complete one cycle animation - fill - modeSpecifies a style for the element when the animation is not playing (before it starts, after it ends, or both)
Formula
animation - iteration - count
Specifies the number of times an animation should be played animation - name
Specifies the name of the @keyframes animation animation - play - state
Specifies whether the animation is running or paused animation - timing - function