CSS - animation-direction Property

Quiz

CSS animation-direction property specifies the direction that an animation should follow: either forwards, backwards or alternating between these two directions, creating a back and forth movement.

Using the shorthand property animation is a common and simple way to configure all animation properties at once.

Syntax

animation-direction:normal | reverse | alternate | alternate-reverse

Property Values

Values	Description
normal	This is the default setting, with this value the animation progresses in the forward direction.
reverse	This value makes the animation progress in the backward direction.
alternate	This value makes the animation progress in the forward direction first and then in the backward direction
alternate-reverse	This value makes the animation progress in the backward direction first and then in the forward direction.

Examples of CSS animation-direction Property

Below listed examples will illustrate the animation direction property with different values.

Forward Movement Animation

The following example demonstrates animation-direction with value as normal.

The animation in this case plays normally moving in the forward direction. The box starts to move towards right.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        /* Styling the container for the boxes */

        .container {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        /* Styling for the box with 'normal' animation */

        .normal-box {
            padding: 10%;
            background-color: #3498db;
            animation-duration: 2s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-name: moveNormal;
            /* Animation moves continuously 
            from start to end */
            animation-direction: normal;

        }

        /* Keyframes for the 'moveNormal' animation */

        @keyframes moveNormal {
            from {
                transform: translateX(0);
            }
            to {
                /* Moves the box horizontally 
                to the right */
                transform: translateX(200px);

            }
        }
    </style>
</head>

<body>
    <h2>CSS Animation direction property </h2>
    <div class="container">
        <div class="normal-box"></div>

    </div>
</body>

</html>

Backward Movement Animation

The following example demonstrates animation-direction with value as reverse.

The animation in this case moves in the backward direction. The box considered here moves in the backward direction.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        /* Styling the container for the boxes */

        .container {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        /* Styling for the box with 'reverse' animation */

        .reverse-box {
            padding: 10%;
            background-color: #e74c3c;
            animation-duration: 2s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-name: moveReverse;
            /* Animation oscillates backwards */
            animation-direction: reverse;
        }

        /* Keyframes for the 'moveReverse' animation */

        @keyframes moveReverse {
            from {
                transform: translateX(0);
            }
            to {
                /* Moves the box back 
                and forth horizontally */
                transform: translateX(200px);
            }
        }
    </style>
</head>

<body>
    <h2>CSS Animation Direction Property</h2>
    <div class="container">

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

</html>

Forth and Back Movement Animation

The following example demonstrates animation-direction with value as alternate.

The animation in this case first moves forward and then backward. The box considered here moves forward for the first half cylce and then moves backward for the other half cycle.

Example

  <!DOCTYPE html>
<html>

<head>
    <style>
        /* Styling the container for the boxes */

        .container {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        /* Styling for the box with 
           'alternate' animation */

        .alternate-box {
            padding: 10%;
            background-color: #e74c3c;
            animation-duration: 2s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-name: moveAlternate;
            /* Animation oscillates back and forth */
            animation-direction: alternate;
        }

        /* Keyframes for the 'moveAlternate' animation */

        @keyframes moveAlternate {
            from {
                transform: translateX(0);
            }
            to {
                /* Moves the box back 
                   and forth horizontally */
                transform: translateX(200px);
            }
        }
    </style>
</head>

<body>
    <h2>CSS Animation Direction Property</h2>
    <div class="container">

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

</html>

Back and Forth Movement Animation

The following example demonstrates animation-direction with value as alternate-reverse.

The animation in this case first moves backwards and then starts moving in the forward direction. The box considered here first moves backwards and then forward.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        /* Styling the container for the boxes */

        .container {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        /* Styling for the box with 'alternate' animation */

        .alternate-box {
            padding: 10%;
            background-color: #e74c3c;
            animation-duration: 2s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-name: moveAlternate;
            /* Animation oscillates back and forth */
            animation-direction: alternate;
        }

        /* Keyframes for the 'moveAlternate' animation */

        @keyframes moveAlternate {
            from {
                transform: translateX(0);
            }
            to {
                /* Moves the box back and
                forth horizontally */
                transform: translateX(200px);
            }
        }
    </style>
</head>

<body>
    <h2>CSS Animation Direction Property</h2>
    <div class="container">

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

</html>

Supported Browsers

Property
animation-direction	43.0	10.0	16.0	9.0	30.0

Print Page