animation-delay
The delay postpones the animation start. Negative values start the animation mid-cycle — useful for staggered effects that appear to be already in progress.
CSS
Intermediate
4 min read
animation-delay Property
Example
/* Stagger three cards */
.card:nth-child(1) { animation-delay: 0s; }
.card:nth-child(2) { animation-delay: 0.15s; }
.card:nth-child(3) { animation-delay: 0.3s; }
/* Negative delay: starts 0.5s into the cycle */
.loader-dot {
animation: blink 1s infinite;
animation-delay: -0.5s;
} Pro Tip
Negative delays create offset animations that appear to be mid-cycle on load — great for looping spinners.