📌 What Is animation-direction?

The animation-direction property controls which direction an animation plays during each cycle. With this property, animations can move forward, backward, alternate direction, or reset each time. This gives your animations more natural and dynamic movement. 🎬✨

🧩 Basic Syntax

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

🎯 animation-direction Values Explained

🧪 Simple Example

@keyframes move {
  from { transform: translateX(0); }
  to   { transform: translateX(100px); }
}

.box {
  animation-name: move;
  animation-duration: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

✔ The box moves right, then left, repeatedly.

🎬 animation-direction Values in Action

1️⃣ normal

animation-direction: normal;

➡️ Runs from 0% → 100% every time

2️⃣ reverse

animation-direction: reverse;

⬅️ Runs from 100% → 0% every cycle

3️⃣ alternate

animation-direction: alternate;

↔️ Forward → Backward → Forward → Backward

4️⃣ alternate-reverse

animation-direction: alternate-reverse;

🔁 Backward → Forward → Backward → Forward

🧠 animation-direction with animation-iteration-count

These two properties work closely together. For example:

.loader {
  animation: pulse 1s infinite alternate;
}

✔ Because of alternate, the animation reverses direction every loop.

🎨 Real-World Examples

1️⃣ Ping-Pong Loader

.loader {
  width: 40px;
  height: 40px;
  background: black;
  animation: move 0.6s infinite alternate ease-in-out;
}

2️⃣ Reverse Animation for Exit Motion

Useful when animating modals, tooltips, and dropdown exits.

.modal-leave {
  animation: fade 0.4s reverse forwards;
}

3️⃣ Alternate-Reverse for Organic Feel

.wiggle {
  animation: wiggle 0.8s infinite alternate-reverse ease-in-out;
}

✨ animation-direction in Shorthand

animation: move 1s ease-in-out 0s infinite alternate;

🛠️ Tips for Using animation-direction

🔍 Debugging Tips

🔗 Helpful Resources