CSS animation-direction Property

Posted in CSS Tutorial

Updated on Oct 01, 2024

By Mari Selvan

👁️ 16 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The animation-direction property in CSS specifies the direction in which the animation plays. This property determines whether the animation should run forwards, backwards, or alternate between these directions.

Understanding and utilizing this property allows you to create more dynamic and visually engaging animations on your web pages.

💡 Syntax

The syntax for the animation-direction property is as follows:

Syntax

Copied

element {
  animation-direction: value;
}

Here, value can be one of the predefined keywords listed in the "Property Values" section.

🎛️ Default Value

The default value of the animation-direction property is normal. This means that the animation will run from start to end, and if it repeats, it will start again from the beginning.

🏠 Property Values

Value	Description
normal	The animation plays forward from start to end. When repeated, it starts from the beginning.
reverse	The animation plays backward from end to start. When repeated, it starts again from the end.
alternate	The animation plays forward from start to end, then backward from end to start. This alternating direction continues for each iteration.
alternate-reverse	The animation plays backward from end to start, then forward from start to end. This alternating direction continues for each iteration.

📄 Example

In this example, we create a simple animation of a box that changes its position. We use the animation-direction property to alternate the direction of the animation.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS animation-direction Example</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: blue;
      position: absolute;
      animation: move 4s infinite alternate;
    }

    @keyframes move {
      from {
        transform: translateX(0);
      }
      to {
        transform: translateX(200px);
      }
    }
  </style>
</head>
<body>
  <h1>Animation Direction Example</h1>
  <div class="box"></div>
</body>
</html>

🖥️ Browser Compatibility

The animation-direction property is widely supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is recommended to test animations in various browsers to ensure consistent behavior across different environments.

🎉 Conclusion

The animation-direction property is a useful tool for controlling the playback direction of animations.

By setting this property, you can enhance the visual impact of your animations, making them more engaging and dynamic. Experiment with different values to see how they affect the flow of your animations and how they fit into your overall design.