The animation-delay property delays the animation before it starts.
Its value is defined in seconds (s) or milliseconds (ms).
This animation starts after a 5-second animation-delay.
<style>
.animate {
width: 80px;
height: 80px;
background: steelblue;
position: relative;
animation: translateAnimation 2s infinite;
animation-delay: 5s;
}
@keyframes translateAnimation {
from { transform: none; }
to { transform: translateX(250%); }
}
</style>
<div class="animate"></div>
animation-delay: time | initial | inherit;
| Value | Description |
|---|---|
| time | Number of seconds (with 's' suffix) or milliseconds (with 'ms' suffix) to wait before animation starts. It also accepts a negative value which is treated as if the animation has been playing for n seconds or milliseconds already. |
| initial | Sets to the default value. |
| inherit | Inherit value from the parent element. |
This table shows when animation-delay 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 |
