CSS animation-direction Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The animation-direction property in CSS controls the direction in which an animation is played. While many animations naturally run from their starting keyframe to their ending keyframe in a forward manner, this property allows developers to alter that flow. By adjusting the direction, an animation can run in reverse, alternate between forward and backward directions, or even alternate in a reverse-first sequence. This gives designers a powerful tool for creating more dynamic, non-linear motion effects, adding visual interest and complexity to otherwise straightforward animations.

One of the key benefits of animation-direction is its ability to work in conjunction with animation-iteration-count. When an animation is set to repeat multiple times, the direction can change with each iteration, allowing for oscillating or ping-pong motion effects. For example, a bouncing ball could appear to rise and fall naturally without needing separate keyframes for each movement direction. This property essentially reduces redundancy in animation coding and simplifies complex motion sequences.

Moreover, animation-direction can be combined with other animation-related properties like animation-fill-mode and animation-timing-function to achieve highly controlled effects. While the timing function controls the pacing of an animation, and the fill mode determines how an element retains styles before or after the animation, animation-direction dictates the path along which these effects occur. Together, they give designers precise control over the visual storytelling of animated elements, whether creating subtle hover effects, looping background motions, or intricate interactive sequences.

Definition

Initial value: normal
Applies to: All elements, :before and :after pseudo elements
Inherited: No
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.animationDirection

Interactive Demo

animation-direction: alternate;

animation-direction: reverse;

animation-direction: alternate-reverse;

animation-direction: normal;

Syntax

animation-direction: <single-animation-direction> [ ',' <single-animation-direction> ]*

Values

<single-animation-direction> = normal | reverse | alternate | alternate-reverse

normalAll iterations of the animation are played as specified.
reverseAll iterations of the animation are played in the reverse direction from the way they were specified.
alternateThe animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.
alternate-reverseThe animation cycle iterations that are odd counts are played in the reverse direction, and the animation cycle iterations that are even counts are played in a normal direction.

Example

HTML

<div class="wrapper">

    <h2>animation-direction examples</h2>

    <div class="row">

        <div class="demo">

            <div class="box box-normal"></div>

            <span class="label">normal</span>

        </div>

        <div class="demo">

            <div class="box box-reverse"></div>

            <span class="label">reverse</span>

        </div>

        <div class="demo">

            <div class="box box-alternate"></div>

            <span class="label">alternate</span>

        </div>

        <div class="demo">

            <div class="box box-alt-reverse"></div>

            <span class="label">alternate-reverse</span>

        </div>

    </div>

</div>

CSS

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f6f8fa;
    color: #222;
}

.wrapper {
    width: 780px;
    padding: 24px;
}

h2 {
    text-align: center;
    margin: 0 0 18px 0;
    font-size: 18px;
}

.row {
    display: flex;
    gap: 18px;
    justify-content: space-between;
}

.demo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 180px;
}

.box {
    width: 140px;
    height: 44px;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(17, 24, 39, 0.06);
    transform: translateX(0);
}

.label {
    font-size: 13px;
    color: #444;
}

@keyframes slide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(120px);
    }
}

/* Demonstrations of different animation-direction values */
.box-normal {
    background: linear-gradient(90deg, #06b6d4, #0891b2);
    animation: slide 1.2s ease-in-out infinite;
    animation-direction: normal; /* plays forward every iteration */
}

.box-reverse {
    background: linear-gradient(90deg, #fb923c, #f97316);
    animation: slide 1.2s ease-in-out infinite;
    animation-direction: reverse; /* plays backward every iteration */
}

.box-alternate {
    background: linear-gradient(90deg, #34d399, #10b981);
    animation: slide 1.2s ease-in-out infinite;
    animation-direction: alternate; /* alternates forward then backward */
}

.box-alt-reverse {
    background: linear-gradient(90deg, #ef4444, #dc2626);
    animation: slide 1.2s ease-in-out infinite;
    animation-direction: alternate-reverse; /* alternates starting with reverse */
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS animation-direction property. Hover over a browser icon to see the version that first introduced support for this CSS property.