🎯 CSS animation-duration Property

The animation-duration property defines how long an animation takes to complete one full cycle. It determines the amount of time required for an animation to move from its starting state to its ending state.

Without a duration value, animations finish instantly and become invisible to users. This makes animation-duration one of the most important properties when working with CSS animations.

The property accepts time values in either seconds (s) or milliseconds (ms). The browser uses this value to determine how quickly the animation progresses from start to finish.

Specifies the duration of the animation. You can define the value using seconds or milliseconds.

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

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

In this example, the fadeIn animation takes 2 seconds to complete.

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

.box {
    animation-duration: initial;
}
                

The default value is 0s, meaning the animation completes immediately and no visible animation effect occurs.

The following example demonstrates how to apply an animation duration to a fade-in effect.

@keyframes fadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}

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

The element gradually changes from invisible to fully visible over a period of two seconds.

The animation-duration property allows you to control the speed of CSS animations, making user interfaces more interactive and visually appealing.

• Control how long animations take to complete
• Create smooth visual effects
• Improve user experience and engagement
• Adjust animation speed for different scenarios
• Build professional and modern interfaces