How can I delay the start of a CSS animation using keyframes?
Asked on Sep 28, 2025
Answer
To delay the start of a CSS animation, you can use the "animation-delay" property. This property allows you to specify a delay before the animation starts.
<!-- BEGIN COPY / PASTE -->
<style>
.animated-box {
width: 100px;
height: 100px;
background-color: blue;
animation-name: slide;
animation-duration: 2s;
animation-delay: 1s; /* Delay the start by 1 second */
}
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
</style>
<div class="animated-box"></div>
<!-- END COPY / PASTE -->Additional Comment:
- The "animation-delay" property accepts time values in seconds (s) or milliseconds (ms).
- You can use negative values for "animation-delay" to start the animation partway through.
- Multiple animations can have different delays by separating values with commas.
- Ensure the "animation-name" and "animation-duration" are set for the delay to take effect.
Recommended Links: