CSS animation-duration property defines the length of time that an animation takes to complete one cycle. Few points to noe about animation-duration:
- It cannot be negative.
- Some valid values are:
- 4s
- 2000ms
- 4s,5s (in case animation-name has multiple values)
CSS property animation-duration
| CSS version: | CSS 3 |
| Value: | time [, time]* |
| Initial: | 0s |
| Applies to: | all elements, ::before and ::after pseudo-elements |
| Inherited: | no |
Example – animation-duration
In the following code, CSS property animation-duration can be changed to the following values
- 4s
- 8s
- 500ms
<style>
@keyframes left-to-right {
0% {left:0;}
100% {left:200px;}
}
.box {
position: fixed;
background-color:lightgreen;
animation-name: left-to-right;
animation-duration: 4s;
animation-iteration-count:infinite;
}
</style>
<div class=box>Object</div>animation-duration refresh
