CSS animation-direction property
Tags: learncss, cssa
Published: 2021-05-10 05:20:52

---
title: CSS animation-direction property
published: true
date: 2021-02-19 11:28:10 UTC
tags: LearnCSS,CSSA
canonical_url: https://sharepointanchor.com/learn-css/css-animation-direction-property/
---

The CSS animation-direction property is used to define how animation should be played which means that your animation can be played **forward** , **backward** , or in **alternate cycles**. This is one of the **CSS3** properties.

Its default value is **normal**. whenever you run the animation, it will **reset to the beginning state** and start over.

- This property accepts the following values.
  - **normal**
  - **reverse**
  - **alternate**
  - **alternate-reverse**
  - **initial**
  - **inherit**

## Animation-direction property characteristics: 

| **Initial Value** |   
normal |
| **Applies to** | All elements, It also applies to **`::before`** and **`::after`** pseudo-elements. |
| **Inherited** | No |
| **Animatable** | No |
| **Version** | CSS3 |
| **JavaScript Syntax** | **`object.style.animationDirection = "reverse"`** |

## Syntax:

```

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

```

## Values:

| **Value** | **Description** |
| --- | --- |
| **normal** | It is a **default** value. Whenever you run the animation, it will **reset to the beginning state and start over**. |
| **reverse** | With this value, the **animation plays backward**. Whenever you run the animation, it will **reset to the end and start over**. |
| **alternate** | This value first **moves the animation forward and then backward**. |
| **alternate-reverse** | At first, the a **nimation moves backward** , **then forwards**. |
| **initial** | It can **set the property to its default value**. |
| **inherit** | **Inherits the property from its parent** element. |

## Example of animation-direction property:

Here, we will show you the code using animation-direction with the normal value.

```

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {

        width: 120px;

        height: 120px;

        background: #ccc;

        position: relative;

        animation: myfirst 5s 1;

        animation-direction: normal;
      }
      @keyframes myfirst {
        0% {

          background: #8DC3CF;

          left: 0px;

          top: 0px;
        }
        25% {

          background: #1c87c9;

          left: 200px;

          top: 0px;
        }
        50% {

          background: #030E10;

          left: 200px;

          top: 200px;
        }
        75% {

          background: #666;

          left: 0px;

          top: 200px;
        }
        100% {

          background: #8ebf42;

          left: 0px;

          top: 0px;
        }
      }
    </style>
  </head>
  <body>

    <h2>Animation-direction example</h2>

    <p>Here the animation plays backwards.</p>

    <div></div>
  </body>
</html>

```

## Result:

By executing the above code, you can get the output as shown in the below image.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/rg6webFy0g.gif)<figcaption>Animation-direction property</figcaption>

## Example of animation-direction property with the “reverse” value:

In the following code, we use the animation-direction property with the reverse value.

```

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {

        width: 100px;

        height: 100px;

        background: #9D0101;

        position: relative;

        animation: myfirst 5s 1;

        animation-direction: reverse;

      }
      @keyframes myfirst {
        0% {

          background: #8DC3CF;

          left: 0px;

          top: 0px;

        }
        25% {

          background: #FD8F01;

          left: 200px;

          top: 0px;

        }
        50% {

          background: #01BA02;

          left: 200px;

          top: 200px;

        }
        75% {

          background: #01865E;

          left: 0px;

          top: 200px;

        }
        100% {

          background: #014686;

          left: 0px;

          top: 0px;

        }
      }
    </style>
  </head>
  <body>

    <h2>Animation-direction example</h2>

    <p>In this example the animation plays as reverse.</p>

    <div></div>
  </body>
</html>

```

## Result:

After running the above code, you will get the result as shown in the below image.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/m8OoH8Gepj.gif)<figcaption>Animation-direction with reverse value</figcaption>

## Example of animation-direction property with the “alternate” value:

The following code show you the animation-direction property with the alternate value.

```

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {

        width: 100px;

        height: 100px;

        background: #5457C4;

        position: relative;

        animation: myfirst 5s 2;

        animation-direction: alternate;

      }
      @keyframes myfirst {
        0% {

          background: #7301D0;

          left: 0px;

          top: 0px;

        }
        25% {

          background:#BF01BD;

          left: 200px;

          top: 0px;

        }
        50% {

          background: #BF0129;

          left: 200px;

          top: 200px;

        }
        75% {

          background: #480D19;

          left: 0px;

          top: 200px;

        }
        100% {

          background: #BABF01;

          left: 0px;

          top: 0px;

        }
      }
    </style>
  </head>
  <body>

    <h2>Animation-direction example</h2>

    <p>Here the animation plays first forwards, then backwards.</p>

    <div></div>
  </body>
</html>

```

## Result:

By running the above code, you can get the output as shown in the below image.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/KhExvGgKeg.gif)<figcaption>Animation-direction with alternate value</figcaption>

## Example of animation-direction property with the “alternate-reverse” value:

In this code, we apply the animation-direction property with the alternate-reverse value.

```

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {

        width: 100px;

        height: 100px;

        background: #5457C4;

        position: relative;

        animation: myfirst 5s 1;

        animation-direction: alternate-reverse;

      }
      @keyframes myfirst {
        0% {

          background: #7301D0;

          left: 0px;

          top: 0px;

        }
        25% {

          background: #BF01BD;

          left: 200px;

          top: 0px;

        }
        50% {

          background: #BF0129;

          left: 200px;

          top: 200px;

        }
        75% {

          background: #480D19;

          left: 0px;

          top: 200px;

        }
        100% {

          background: #BABF01;

          left: 0px;

          top: 0px;

        }
      }
    </style>
  </head>
  <body>

    <h2>Animation-direction example</h2>

    <p>Here the animation plays backwards, then forwards.</p>

    <div></div>
  </body>
</html>

```

## Result:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/Animation-direction.gif)<figcaption>Animation-direction Property</figcaption>

## Browser-Support:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_XZrcWah6TE.png)<figcaption>Browser-support</figcaption>

**Read Ahead:**

- [CSS animation Property](https://sharepointanchor.com/learn-css/css-animation-property/)
- [CSS animation-delay Property](https://sharepointanchor.com/learn-css/css-animation-delay-property/)
- [HTML <aside> Aside Tag](https://sharepointanchor.com/learn-html/html-aside-tag/)
- [CSS all Property](https://sharepointanchor.com/learn-css/css-all-property/)
- [HTML <code> Code Tag](https://sharepointanchor.com/learn-html/html-code-tag/)

The post [CSS animation-direction property](https://sharepointanchor.com/learn-css/css-animation-direction-property/) appeared first on [Share Point Anchor](https://sharepointanchor.com).