How can I delay the start of a CSS animation by 2 seconds?
Asked on Oct 01, 2025
Answer
To delay the start of a CSS animation by 2 seconds, you can use the "animation-delay" property. This property specifies the amount of time to wait before starting the animation.
<!-- BEGIN COPY / PASTE -->
<style>
.animated-element {
animation-name: exampleAnimation;
animation-duration: 4s;
animation-delay: 2s; /* Delays the start by 2 seconds */
}
@keyframes exampleAnimation {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
<div class="animated-element">
This element will fade in after a 2-second delay.
</div>
<!-- END COPY / PASTE -->Additional Comment:
- The "animation-delay" property can be specified in seconds (s) or milliseconds (ms).
- Multiple animations can have different delays by separating them with commas.
- Ensure the "animation-name" and "animation-duration" properties are also defined for the animation to work.
Recommended Links: