The animation-duration sets the timespan of an animation cycle.
The value is defined in seconds (s) or milliseconds (ms).
A 2-second animation-duration. The cycle repeats indefinitely.
<style>
.animate {
width: 80px;
height: 80px;
background: steelblue;
animation-name: durationAnimation;
animation-iteration-count: infinite;
animation-duration: 2s;
}
@keyframes durationAnimation {
from { transform: none; }
to { transform: translateX(300%); }
}
</style>
<div class="animate"></div>
animation-duration: time | initial | inherit;
| Value | Description |
|---|---|
| time | Specifies the duration of the animation, expressed in seconds (s suffix) or milliseconds (ms suffix). The default is 0 means no animation. |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different animation-duration values.
<style>
.animate-fast {
width: 80px;
height: 80px;
background: steelblue;
animation-name:fastAnimation;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-duration: 600ms;
}
@keyframes fastAnimation {
from { transform: none; }
to { transform: translateX(300%); }
}
</style>
<div class="animate-fast"></div>
Animating the content property can create interesting effects.
<style>
.loader:after {
content: "";
font-weight: 600;
font-size: 18px;
color: steelblue;
animation-name: work-in-progress;
animation-duration: 1200ms;
animation-iteration-count: infinite;
}
@keyframes work-in-progress {
0% { content: "L"; }
10% { content: "Lo"; }
20% { content: "Loa"; }
30% { content: "Load"; }
40% { content: "Loadi"; }
50% { content: "Loadin"; }
60% { content: "Loading"; }
70% { content: "Loading ."; }
80% { content: "Loading .."; }
90% { content: "Loading ..."; }
100% { content: "Loading ...."; }
}
</style>
<div class='loader'></div>
This table shows when animation-duration support started for each browser.
 Chrome
|
43.0 | May 2015 |
 Firefox
|
16.0 | Oct 2012 |
 IE/Edge
|
10.0 | Sep 2012 |
 Opera
|
30.0 | Jun 2015 |
 Safari
|
9.0 | Sep 2015 |
