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
Run Animation backward first and then forwards with CSS
The CSS animation-direction property controls the direction of animation playback. Using the alternate-reverse value, you can run an animation backwards first, then forwards, creating a smooth back-and-forth effect.
Syntax
selector {
animation-direction: alternate-reverse;
}
Possible Values
| Value | Description |
|---|---|
normal |
Animation plays forward (default) |
reverse |
Animation plays backward |
alternate |
Animation alternates between forward and backward |
alternate-reverse |
Animation starts backward, then alternates |
Example
The following example demonstrates an animation that runs backward first, then forwards using alternate-reverse −
<!DOCTYPE html>
<html>
<head>
<style>
.animated-box {
width: 150px;
height: 100px;
position: relative;
background-color: #4CAF50;
animation-name: moveBox;
animation-duration: 2s;
animation-direction: alternate-reverse;
animation-iteration-count: 3;
margin: 50px;
border-radius: 10px;
}
@keyframes moveBox {
0% {
background-color: #4CAF50;
left: 0px;
top: 0px;
transform: scale(1);
}
50% {
background-color: #FF5722;
left: 200px;
top: 100px;
transform: scale(1.2);
}
100% {
background-color: #2196F3;
left: 0px;
top: 0px;
transform: scale(1);
}
}
</style>
</head>
<body>
<div class="animated-box"></div>
</body>
</html>
A rounded box starts as blue (100% keyframe), moves to red at center-right while scaling up, then back to green at the starting position. This cycle repeats 3 times, alternating between backward and forward directions.
Conclusion
The animation-direction: alternate-reverse property creates smooth back-and-forth animations by starting with the reverse direction first. This is particularly useful for creating oscillating or pendulum-like effects in web animations.
Updated on: 2026-03-15T12:40:35+05:30
2K+ Views
Advertisements