Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS animation-direction Property

Posted in CSS Tutorial
Updated on Oct 01, 2024
By Mari Selvan
👁️ 11 - Views
⏳ 4 mins
💬 1 Comment
CSS animation-direction Property

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
Copy To Clipboard
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

ValueDescription
normalThe animation plays forward from start to end. When repeated, it starts from the beginning.
reverseThe animation plays backward from end to start. When repeated, it starts again from the end.
alternateThe animation plays forward from start to end, then backward from end to start. This alternating direction continues for each iteration.
alternate-reverseThe 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
Copy To Clipboard
<!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.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy