CSS animation-direction property
The animation-direction property in CSS specifies the direction in which an animation should play. It defines whether the animation should play in a forward or backward direction, or alternate between these directions. This property is useful for creating animations that need to reverse direction or repeat in a different way.
Syntax
element {
animation-direction: direction;
}
direction: Defines the direction in which the animation should play. It can be one of the following values:normalreversealternatealternate-reverse
Values
normal:- The animation plays in the direction defined by the keyframes from start to end (
0%to100%).
animation-direction: normal;- This is the default value.
- The animation plays in the direction defined by the keyframes from start to end (
reverse:- The animation plays in the reverse direction, from end to start (
100%to0%).
animation-direction: reverse;- The animation plays in the reverse direction, from end to start (
alternate:- The animation alternates between playing forward and backward. For example, it plays forward on the first iteration, then reverses direction for the second iteration, and so on.
animation-direction: alternate;alternate-reverse:- The animation alternates between playing backward and forward. For example, it plays backward on the first iteration, then plays forward on the second iteration, and so on.
animation-direction: alternate-reverse;
Example
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Direction Example</title>
<style>
@keyframes move {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.box-normal {
width: 100px;
height: 100px;
background-color: red;
animation-name: move;
animation-duration: 2s;
animation-direction: normal;
}
.box-reverse {
width: 100px;
height: 100px;
background-color: green;
animation-name: move;
animation-duration: 2s;
animation-direction: reverse;
}
.box-alternate {
width: 100px;
height: 100px;
background-color: blue;
animation-name: move;
animation-duration: 2s;
animation-direction: alternate;
}
.box-alternate-reverse {
width: 100px;
height: 100px;
background-color: orange;
animation-name: move;
animation-duration: 2s;
animation-direction: alternate-reverse;
}
</style>
</head>
<body>
<div class="box-normal"></div>
<div class="box-reverse"></div>
<div class="box-alternate"></div>
<div class="box-alternate-reverse"></div>
</body>
</html>
Explanation:
@keyframes move:- Defines an animation that moves the element horizontally from
0pxto100px.
- Defines an animation that moves the element horizontally from
.box-normal:- Plays the animation from start to end (
0%to100%) in the normal direction.
- Plays the animation from start to end (
.box-reverse:- Plays the animation in reverse, moving from
100pxback to0px.
- Plays the animation in reverse, moving from
.box-alternate:- Alternates between moving forward and backward with each iteration.
.box-alternate-reverse:- Alternates between moving backward and forward with each iteration.
Important Points
Default Value:
- The default value is
normal, meaning the animation will play in the direction defined by the keyframes.
- The default value is
Interaction with Iteration Count:
- The
animation-directionproperty works in conjunction withanimation-iteration-count. For example, withanimation-direction: alternate, ifanimation-iteration-countis3, the animation will play forward, then backward, then forward again.
- The
Reversing Animation:
- Using
reversecan be useful when you want the animation to start at the end state and animate backward to the start state.
- Using
Alternating Animations:
- The
alternateandalternate-reversevalues are especially useful for creating animations that need to play back and forth, such as a bouncing effect or a sliding transition.
- The