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
Which CSS property is used to run Animation in Reverse Direction?
The CSS animation-direction property is used to run animation in reverse direction. This property controls whether an animation should play forwards, backwards, or alternate back and forth.
Syntax
selector {
animation-direction: value;
}
Possible Values
| Value | Description |
|---|---|
normal |
Animation plays forward (default) |
reverse |
Animation plays in reverse direction |
alternate |
Animation plays forward, then backward |
alternate-reverse |
Animation plays backward, then forward |
Example: Reverse Animation Direction
The following example shows how to run an animation in reverse direction using the reverse value −
<!DOCTYPE html>
<html>
<head>
<style>
.box {
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 class="box"></div>
</body>
</html>
A yellow box appears and continuously animates its background color from blue to green (reverse direction), repeating infinitely.
Comparison with Normal Direction
Here's a comparison showing both normal and reverse animation directions −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
gap: 20px;
padding: 20px;
}
.box {
width: 100px;
height: 100px;
background-color: red;
animation-name: moveRight;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
.normal {
animation-direction: normal;
}
.reverse {
animation-direction: reverse;
}
@keyframes moveRight {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
</style>
</head>
<body>
<div class="container">
<div class="box normal"></div>
<div class="box reverse"></div>
</div>
</body>
</html>
Two red boxes appear side by side. The first box moves left to right repeatedly (normal direction), while the second box moves right to left repeatedly (reverse direction).
Conclusion
The animation-direction property with the reverse value effectively reverses the animation sequence, making it play from end to start. This is useful for creating dynamic effects and controlling animation flow in CSS.
Updated on: 2026-03-15T12:33:54+05:30
328 Views
Advertisements