CSS animation-delay property defines when the animation will start. It allows an animation to begin execution some time after it is applied. In case animation-name has multiple values, animation-delay can also have multiple values.
CSS property animation-delay
| CSS version: | CSS 3 |
| Value: | time [, time]* |
| Initial: | 0s |
| Applies to: | all elements, ::before and ::after pseudo-elements |
| Inherited: | no |
Example – animation-delay
In the following code, CSS property animation-delay can be changed to the following values
- 0s
- 2s
- 5s
<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-delay:0s;
}
</style>
<div class=box>Object</div>animation-delay refresh
