animation-delay

christian.dinh2481 total contributions
Published Jul 1, 2021Updated Sep 3, 2021
Contribute to Docs
Defines when an animation starts.
Syntax
animation-delay: <value>;
where <value>
can be one of the following:
- Seconds:
2s
- Milliseconds:
200ms
Note: If not provided, an animation will occur immediately because the default value is 0s
.
Example 1
Wait 2s
then run the animation:
div {height: 200px;width: 200px;background-color: blue;animation-name: disappear;animation-duration: 2s;animation-delay: 2s;}@keyframes disappear {from {background-color: blue;}to {background-color: white;}}
Example 2
Add a second value to wait 6000ms
then run the second animation:
div {height: 200px;width: 200px;background-color: blue;animation-name: bluewhiteblue, slideright;animation-duration: 4s, 5000ms;animation-delay: 2s, 6000ms;}@keyframes bluewhiteblue {0% {background-color: blue;}50% {background-color: white;}100% {background-color: blue;}}@keyframes slideright {from {margin-left: 0%;}to {margin-left: 100%;}}
All contributors
- christian.dinh2481 total contributions
- Anonymous contributorAnonymous contributor3077 total contributions
- robgmerrill124 total contributions
- christian.dinh
- Anonymous contributor
- robgmerrill
Looking to contribute?
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.