🎯 CSS animation-delay Property

The animation-delay property specifies how long an animation should wait before it starts. It allows you to delay the beginning of an animation, creating more controlled and visually appealing effects.

By using animation-delay, you can make animations start immediately or after a specified amount of time. This is especially useful when coordinating multiple animations on a page.

Before an animation begins, the browser waits for the amount of time defined by animation-delay. Once the delay period ends, the animation starts normally and follows its defined keyframes.

Specifies the waiting period before the animation begins. Time values can be defined in seconds or milliseconds.

• s → Seconds (e.g. 1s, 0.5s, 2s)
• ms → Milliseconds (e.g. 200ms, 500ms, 1000ms)

.box {
    animation-name: fadeIn;
    animation-duration: 2s;
    animation-delay: 0.5s;
}
                

In this example, the element waits for 0.5 seconds before the animation begins.

The initial value resets the property to its default CSS value.

.box {
    animation-delay: initial;
}
                

The default value is 0s, meaning the animation starts immediately without any delay.

The following example creates a fade-in animation that begins one second after the page loads.

@keyframes fadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}

.box {
    animation-name: fadeIn;
    animation-duration: 2s;
    animation-delay: 1s;
}
                

The browser waits for one second and then starts the fade-in animation, which lasts for two seconds.

The animation-delay property helps create more professional and coordinated animation effects. It allows you to control exactly when an animation should begin.

• Create delayed animation effects
• Synchronize multiple animations
• Improve visual storytelling and user engagement
• Make interfaces feel more dynamic and polished
• Control animation timing with precision