transition-delay
The delay pauses before the transition starts. Use it to stagger multiple element transitions or create sequenced effects.
CSS
Intermediate
4 min read
Transition Delay
Example
/* Stagger list item transitions */
.list-item:nth-child(1) { transition-delay: 0ms; }
.list-item:nth-child(2) { transition-delay: 100ms; }
.list-item:nth-child(3) { transition-delay: 200ms; }
.list-item:nth-child(4) { transition-delay: 300ms; }
.list-item {
transition: opacity 0.3s ease, transform 0.3s ease;
opacity: 0;
transform: translateY(20px);
}
.list-item.visible {
opacity: 1;
transform: none;
} Pro Tip
Stagger delays by 50–100ms between elements for a natural cascade effect without feeling too slow.