DEV Community

Share Point Anchor
Share Point Anchor

Posted on • Originally published at sharepointanchor.com on

CSS animation-direction property

#learncss #cssa

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;
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Result:

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

Animation-direction property

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>
Enter fullscreen mode Exit fullscreen mode

Result:

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

Animation-direction with reverse value

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>
Enter fullscreen mode Exit fullscreen mode

Result:

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

Animation-direction with alternate value

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>
Enter fullscreen mode Exit fullscreen mode

Result:

Animation-direction Property

Browser-Support:

Browser-support

Read Ahead:

The post CSS animation-direction property appeared first on Share Point Anchor.

Top comments (0)