Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
CSS animation-direction property
The CSS animation-direction property is used to set whether an animation should be played forwards, backwards, or in alternate cycles. This property allows you to control the playback direction of keyframe animations.
Syntax
selector {
animation-direction: value;
}
Possible Values
| Value | Description |
|---|---|
normal |
Animation plays forward (default) |
reverse |
Animation plays backward |
alternate |
Animation plays forward, then backward |
alternate-reverse |
Animation plays backward, then forward |
Example: Reverse Animation
The following example demonstrates the reverse value, which plays the animation backward −
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 100px;
background-color: yellow;
animation-name: colorChange;
animation-duration: 2s;
animation-direction: reverse;
animation-iteration-count: infinite;
margin: 20px;
}
@keyframes colorChange {
from {
background-color: green;
}
to {
background-color: blue;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
A yellow box animates in reverse, starting from blue and changing to green repeatedly, opposite to the normal keyframe direction.
Example: Alternate Direction
This example shows the alternate value, which makes the animation play forward and then backward −
<!DOCTYPE html>
<html>
<head>
<style>
.alternate-box {
width: 120px;
height: 120px;
background-color: red;
animation-name: moveBox;
animation-duration: 3s;
animation-direction: alternate;
animation-iteration-count: infinite;
margin: 20px;
}
@keyframes moveBox {
from {
transform: translateX(0px);
background-color: red;
}
to {
transform: translateX(200px);
background-color: purple;
}
}
</style>
</head>
<body>
<div class="alternate-box"></div>
</body>
</html>
A red box moves from left to right while changing to purple, then returns to its original position while changing back to red, creating a smooth back-and-forth motion.
Conclusion
The animation-direction property provides precise control over animation playback. Use reverse to play animations backward, or alternate to create smooth back-and-forth effects without abrupt transitions.
Updated on: 2026-03-15T12:48:27+05:30
206 Views
Advertisements