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-duration property
The CSS animation-duration property specifies how long an animation should take to complete one full cycle. This property controls the speed of your animations by setting the time duration.
Syntax
selector {
animation-duration: time;
}
Possible Values
| Value | Description |
|---|---|
time |
Specifies the duration in seconds (s) or milliseconds (ms) |
0s |
Default value. No animation occurs |
Example: 2-Second Animation Duration
The following example creates a moving and color-changing animation that completes in 2 seconds −
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 200px;
position: relative;
background: red;
animation-name: myanim;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes myanim {
from {
left: 0px;
background-color: green;
}
to {
left: 200px;
background-color: blue;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
A rectangle moves from left to right across the screen while changing color from green to blue. The entire animation takes 2 seconds to complete and repeats continuously.
Example: Comparing Different Duration Values
This example shows three boxes with different animation durations −
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
margin: 10px;
background: #ff6b6b;
animation-name: slide;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.fast { animation-duration: 0.5s; }
.medium { animation-duration: 2s; }
.slow { animation-duration: 4s; }
@keyframes slide {
from { transform: translateX(0px); }
to { transform: translateX(200px); }
}
</style>
</head>
<body>
<div class="box fast"></div>
<div class="box medium"></div>
<div class="box slow"></div>
</body>
</html>
Three red boxes slide back and forth horizontally. The top box moves quickly (0.5s), the middle box at medium speed (2s), and the bottom box moves slowly (4s).
Conclusion
The animation-duration property is essential for controlling animation timing. Use shorter durations for quick transitions and longer durations for smooth, gradual animations.
Updated on: 2026-03-15T12:38:18+05:30
115 Views
Advertisements