Animation Right To Left Css

Animation-direction Property

Definition

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.

Values

The animation-direction property can have the following values:

• normal: The animation plays forward.
• reverse: The animation plays backward.
• alternate: The animation plays forward and then backward, repeating this sequence.
• alternate-reverse: The animation plays forward and then backward, and then forward again, repeating this sequence.

Example

 div {   animation: my_animation 2s infinite;   animation-direction: alternate; } 

In this example, the my_animation animation will play forward and then backward, repeating this sequence indefinitely.

Browser Support

The animation-direction property is supported in all major browsers.

Try it Yourself

See the following examples to try out the animation-direction property:

• Normal
• Reverse
• Alternate
• Alternate-reverse

Conclusion

The animation-direction property is a powerful tool that can be used to create complex and visually appealing animations. By understanding how to use this property, you can add a touch of interactivity and excitement to your web pages.