🎯 CSS animation-direction Property

The animation-direction property defines the playback direction of a CSS animation. It determines whether an animation runs normally, in reverse, or alternates between forward and backward directions.

This property is especially useful when creating dynamic animations that need to move back and forth without requiring additional keyframes.

By default, animations play from the first keyframe to the last keyframe. Using animation-direction, you can reverse the playback order or alternate the direction on each iteration.

The animation plays from the beginning to the end in the normal direction. This is the default behavior.

.box {
    animation-direction: normal;
}
                

The animation plays backward, starting from the final keyframe and ending at the first keyframe.

.box {
    animation-direction: reverse;
}
                

The animation alternates between forward and backward playback on each iteration.

• 1st iteration → Forward
• 2nd iteration → Reverse
• 3rd iteration → Forward
• 4th iteration → Reverse

.box {
    animation-direction: alternate;
}
                

The animation alternates directions, but starts in reverse.

• 1st iteration → Reverse
• 2nd iteration → Forward
• 3rd iteration → Reverse
• 4th iteration → Forward

.box {
    animation-direction: alternate-reverse;
}
                

Resets the property to its default CSS value. The default value is normal.

.box {
    animation-direction: initial;
}
                

The following example demonstrates how to create an animation that continuously moves forward and backward.

@keyframes moveBox {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(200px);
    }

}

.box {
    animation-name: moveBox;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
                

The element moves to the right during the first iteration and then returns to its original position during the next iteration, creating a smooth back-and-forth effect.

The animation-direction property makes animations more natural and interactive by allowing them to change direction automatically.

• Create smooth back-and-forth animations
• Reduce the need for additional keyframes
• Build more dynamic user interfaces
• Improve animation realism and flow
• Create professional motion effects with minimal code