The animation-direction CSS property dictates the direction an animation will play through its sequence of keyframes. This allows for more dynamic and controlled visual effects, such as making an element move back and forth. You can set it to play forwards, backwards, or to alternate between the two on each iteration.
Example 1: normal
/* The 'normal' value plays the animation forward from beginning to end. */
.box-normal {
width: 100px;
height: 100px;
background-color: #3498db;
animation-name: slide-across;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: normal; /* This is the default value. */
}
@keyframes slide-across {
from {
transform: translateX(0);
}
to {
transform: translateX(200px);
}
}
Explanation
In this example, the .box-normal element will continuously move from left to right over 3 seconds. Once it reaches the end, it will jump back to the starting position and repeat the animation from the beginning because the animation-direction is set to its default state, normal.
Example 2: reverse
/* The 'reverse' value plays the animation backward from end to beginning. */
.box-reverse {
width: 100px;
height: 100px;
background-color: #e74c3c;
animation-name: slide-across;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: reverse; /* Plays the animation in reverse. */
}
@keyframes slide-across {
from {
transform: translateX(0);
}
to {
transform: translateX(200px);
}
}
Explanation
Here, the .box-reverse element starts at what would typically be the end of the animation (200px to the right) and moves to the beginning (0px). The reverse value inverts the keyframes, making the animation play backward on each loop.
Example 3: alternate
/* The 'alternate' value plays the animation forward, then backward. */
.box-alternate {
width: 100px;
height: 100px;
background-color: #2ecc71;
animation-name: slide-across;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate; /* Alternates between forward and reverse. */
}
@keyframes slide-across {
from {
transform: translateX(0);
}
to {
transform: translateX(200px);
}
}
Explanation
The .box-alternate element first moves from left to right. On the next iteration, instead of resetting, it smoothly animates back from right to left because alternate reverses the direction for every other cycle, creating a seamless back-and-forth motion.
Example 4: alternate-reverse
/* 'alternate-reverse' plays the animation backward first, then forward. */
.box-alternate-reverse {
width: 100px;
height: 100px;
background-color: #f1c40f;
animation-name: slide-across;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate-reverse; /* Starts by playing in reverse. */
}
@keyframes slide-across {
from {
transform: translateX(0);
}
to {
transform: translateX(200px);
}
}
Explanation
Similar to alternate, alternate-reverse creates a back-and-forth effect. However, the first iteration of the animation for .box-alternate-reverse will play in reverse (right to left), and the subsequent iteration will play forward.
Example 5: Multiple Animations with Different Directions
/* Apply different directions to multiple animations on the same element. */
.box-multiple {
width: 100px;
height: 100px;
background-color: #9b59b6;
animation-name: slide-across, fade-in-out;
animation-duration: 4s, 2s;
animation-iteration-count: infinite, infinite;
animation-direction: alternate, reverse; /* slide-across alternates, fade-in-out reverses */
}
@keyframes slide-across {
to { transform: translateX(200px); }
}
@keyframes fade-in-out {
to { opacity: 0.2; }
}
Explanation
This demonstrates applying two animations with different animation-direction values. The slide-across animation will move the box back and forth, while the fade-in-out animation will continuously play in reverse, causing it to fade out and then snap back to full opacity.
Example 6: Paused and Restarted Animation Direction
/* The animation direction is respected even when paused and restarted. */
.box-paused:hover {
animation-play-state: running; /* Animation runs on hover */
}
.box-paused {
width: 100px;
height: 100px;
background-color: #1abc9c;
animation: pulse 2s infinite alternate-reverse;
animation-play-state: paused; /* Animation is initially paused */
}
@keyframes pulse {
from { transform: scale(1); }
to { transform: scale(1.2); }
}
Explanation
The animation-direction of alternate-reverse is set, but the animation is paused. When you hover over the .box-paused element, the animation will start, beginning with the reverse direction (scaling down from 1.2) and then alternating.
Example 7: Direction with Fill Mode
/* Combining animation-direction with animation-fill-mode. */
.box-fill {
width: 100px;
height: 100px;
background-color: #e67e22;
animation: move-up 3s reverse forwards; /* Uses shorthand for multiple properties */
}
@keyframes move-up {
from {
transform: translateY(0);
opacity: 1;
}
to {
transform: translateY(-100px);
opacity: 0;
}
}
Explanation
This example uses the animation shorthand. The direction is reverse, so it animates from the to keyframe to the from keyframe. The forwards fill-mode ensures that after the single reverse animation completes, the element remains at the state of the from keyframe (its starting position).