CSS `transition-delay`: Control the Timing of Transitions
Master the CSS `transition-delay` property to fine-tune your animation effects. Learn how to add pauses before transitions start, creating more sophisticated and engaging user experiences. This guide explains the syntax and usage with clear examples.
Understanding CSS `transition-delay`
The CSS `transition-delay` property controls the delay before a transition effect begins. Transitions are smooth changes in an element's style, like gradually changing color or size when hovering.
How `transition-delay` Works
Without `transition-delay`, the transition starts immediately when the triggering event (like hovering) occurs. `transition-delay` lets you introduce a pause before the transition starts. The delay is specified in seconds (s) or milliseconds (ms).
Syntax
The syntax is:
transition-delay: time | initial | inherit;
Property Values
time: The delay time (e.g., `0.5s`, `200ms`). Can be positive, negative, or zero.initial: Resets to the default value (0s).inherit: Inherits the value from the parent element.
Negative Delays: A negative delay starts the transition *as if* it had already begun. This is useful for creating specific animation sequences.
Multiple Transitions and Delays
If you're transitioning multiple properties (using `transition-property`), you can specify multiple delays separated by commas. Each delay applies to the corresponding property in the `transition-property` list.
Examples
(Note: The "Test it Now" links below are placeholders for interactive examples that would show the transition effects with different delays.)
Example 1: Simple Delay
This example shows a transition with a 0.5-second delay.
Example 2: `initial` and Negative Delay
This example compares transitions with `initial` (no delay) and a negative delay.
Example 3: Multiple Transitions and Delays
This example demonstrates multiple transitions with delays in milliseconds.