CSS Animation Delay: A Complete Guide

Reverse Animation in CSS

While animation-delay controls when an animation starts, the animation-direction property controls how it plays. To reverse an animation, use one of these values:

Playing Animations Backwards

The reverse value plays the animation backwards each cycle. When you reverse an animation, the animation steps are performed in reverse order, and easing functions are also reversed. For example, an ease-in easing function becomes ease-out when the animation is reversed.

Alternate Direction for Ping-Pong Effects

The alternate value creates a ping-pong effect where the animation plays forwards on odd cycles and backwards on even cycles, creating a smooth, continuous motion that flows back and forth without abrupt resets.

Staggered Animation Techniques

One of the most common uses for animation-delay is creating staggered animations, where multiple elements animate one after another rather than all at once.

List Item Animations

@keyframes fadeInUp {
 from {
 opacity: 0;
 transform: translateY(20px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
}

.list-item {
 animation: fadeInUp 0.5s ease-out forwards;
}

.list-item:nth-child(1) { animation-delay: 0s; }
.list-item:nth-child(2) { animation-delay: 0.1s; }
.list-item:nth-child(3) { animation-delay: 0.2s; }
.list-item:nth-child(4) { animation-delay: 0.3s; }
.list-item:nth-child(5) { animation-delay: 0.4s; }

CSS Variable Approach for Dynamic Content

@keyframes fadeIn {
 from { opacity: 0; transform: translateY(10px); }
 to { opacity: 1; transform: translateY(0); }
}

.item {
 --delay: calc(var(--index) * 0.1s);
 animation: fadeIn 0.4s ease-out forwards;
 animation-delay: var(--delay);
}

Best Practices

Performance Considerations

1. Use transform and opacity: Animating transform and opacity properties is GPU-accelerated and doesn't trigger layout recalculations.

2. Prefer negative delays for immediate feedback: If elements should appear quickly but start mid-animation, use negative delays.

3. Use will-change sparingly: Hint to the browser which properties will animate:

.card {
 will-change: transform, opacity;
}

For projects where performance is critical, our SEO services team ensures that animations enhance rather than hinder search engine rankings and page speed metrics.

User Experience Guidelines

1. Keep delays short: For staggered animations, use delays between 50-150ms between elements.

2. Respect user preferences:

@media (prefers-reduced-motion: reduce) {
 .animated-element {
 animation: none;
 transition: none;
 }
}

3. Match animation to intent: Entrance animations typically use 200-500ms delays, while feedback animations should respond within 100-200ms.

When implemented thoughtfully, animations contribute to a cohesive web development strategy that balances visual appeal with accessibility and performance.

Code Examples

Basic Delayed Fade-In

<style>
 .card {
 opacity: 0;
 transform: translateY(30px);
 animation: fadeInUp 0.6s ease-out forwards;
 }

 @keyframes fadeInUp {
 from {
 opacity: 0;
 transform: translateY(30px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
 }
</style>

<div class="card" style="animation-delay: 0s;">First</div>
<div class="card" style="animation-delay: 0.2s;">Second</div>
<div class="card" style="animation-delay: 0.4s;">Third</div>

Reverse Animation for Toggle States

.button {
 animation: scaleUp 0.3s ease-out;
}

.button.active {
 animation-name: scaleDown;
 animation-direction: reverse;
}

@keyframes scaleUp {
 from { transform: scale(1); }
 to { transform: scale(1.1); }
}

@keyframes scaleDown {
 from { transform: scale(1.1); }
 to { transform: scale(1); }
}

Negative Delay for Resumable Animations

Negative animation-delay values allow you to start an animation at a specific point in its timeline:

.progress-bar {
 animation: progress 5s linear forwards;
 animation-delay: -2.5s; /* Start halfway through */
}

Sources

1. MDN Web Docs: animation-delay
2. MDN Web Docs: animation-direction
3. W3Schools: CSS animation-delay
4. W3Schools: CSS animation-direction