CSS animation-direction Property

Last Updated : 23 Aug, 2024

The animation-direction CSS property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward. It controls the visual flow and repetition behavior of animations in web pages, enhancing dynamic content presentation.

Syntax

animation-direction: normal|reverse|alternate|alternate-reverse|
initial|inherit;

Property Value

The animation-direction properties are listed below:

Value	Description
normal	Plays the animation forward. Default value.
reverse	Plays the animation in the reverse direction.
alternate	Plays the animation forwards first, then backwards.
alternate-reverse	Plays the animation backwards first, then forwards.
initial	Sets the animation property to its default value.
inherit	Inherits the animation property from its parent element.

Example: Normal Animation Direction

In this example, we are using CSS animation-direction to move text from right to left. Animation is infinite, looping normally across the screen.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS animation-direction Property
    </title>
    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
        }

        h3 {
            width: 100%;
            animation-name: text;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }

        #one {
            animation-direction: normal;
        }

        @keyframes text {
            from {
                margin-left: 60%;
            }

            to {
                margin-left: 0%;
            }
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>animation-direction property</h2>
    <h3 id="one">This text is normal.</h3>
</body>

</html>

Output:

p[ppqio

Example: Reverse Animation Direction

In this example, we are using CSS animation-direction set to reverse, causing the text to move from left to right in an infinite loop, opposite of its normal direction.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS animation-direction Property
    </title>
    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
        }

        h3 {
            width: 100%;
            animation-name: text;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }

        #one {
            animation-direction: reverse;
        }

        @keyframes text {
            from {
                margin-left: 60%;
            }

            to {
                margin-left: 0%;
            }
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>animation-direction property</h2>
    <h3 id="one">This text is reverse.</h3>
</body>

</html>

Output:

reverse

Example: Alternate Animation Direction

In this example, we are using CSS animation-direction set to alternate, causing the text to move back and forth between left and right in an infinite loop.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS animation-direction Property
    </title>
    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
        }

        h3 {
            width: 100%;
            animation-name: text;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }

        #one {
            animation-direction: alternate;
        }

        @keyframes text {
            from {
                margin-left: 60%;
            }

            to {
                margin-left: 0%;
            }
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>animation-direction property</h2>
    <h3 id="one">This text is alternate.</h3>
</body>

</html>

Output:

alternate

Example: Alternate-Reverse Animation Direction

In this example, we are using the CSS animation-direction property set to alternate-reverse, causing the text to alternate direction in an infinite loop, starting backward first and then forward.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS animation-direction Property
    </title>
    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
        }

        h3 {
            width: 100%;
            animation-name: text;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }

        #one {
            animation-direction: alternate-reverse;
        }

        @keyframes text {
            from {
                margin-left: 60%;
            }

            to {
                margin-left: 0%;
            }
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>animation-direction property</h2>
    <h3 id="one">This text is alternate-reverse.</h3>
</body>

</html>