🎨 Mastering animation-fill-mode in CSS

📌 What Is animation-fill-mode?

The animation-fill-mode property controls how an element should look before an animation starts and after it ends. Normally, an element returns to its original state after the animation completes — but with animation-fill-mode, you can preserve the final frame, apply the first frame early, or both. ✨

>>“Fill mode decides what the element looks like when the animation is not actively running.”

🧩 Basic Syntax

Syntax

animation-fill-mode: none | forwards | backwards | both;

🎯 Understanding Each Value

ValueMeaningEffect
noneNo styles are applied before or after animation❌ Default (element snaps back)
forwardsRetains the final keyframe after animation ends➡️ “Stay in final state”
backwardsApplies initial keyframe styles during delay⏳ “Start looking animated even before running”
bothCombines forwards + backwards🔄 Keep initial during delay & final after finish

🧪 Example Animation

@keyframes fadeUp

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

Applying fill-mode

.box {
  animation-name: fadeUp;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

✔ After the animation ends, the element will remain visible and stay in its final position.

✨ Detailed Value Explanations

1️⃣ none (Default)

The element starts normally and returns to its original styles after finishing.

none example

animation-fill-mode: none;

Note

Use rarely — animations often feel broken when they snap back.

2️⃣ forwards

Makes the element “freeze” at the final keyframe (100%).

forwards

animation-fill-mode: forwards;

✔ Ideal for fade-in, move-in, and reveal animations.

3️⃣ backwards

Applies the first keyframe state during any animation-delay.

backwards

.item {
  animation: fadeUp 1s ease 2s backwards;
}

✔ During the 2-second delay, the element will already be at opacity: 0instead of showing its original state.

4️⃣ both

Applies both backwards (during delay) and forwards (after animation).

both

animation-fill-mode: both;

✔ Best for staged animations where you want full control before and after.

🎬 Real-World Examples

1️⃣ Fade-in Element Stays Visible

Fade-in with freeze

.fade {
  animation: fadeUp 0.8s forwards;
}

2️⃣ Button Entrance After Delay

Delayed entrance

button {
  animation: popIn 0.5s ease 1s both;
}

✔ During delay → stays hidden
✔ After animation → stays popped in

3️⃣ Slide-in Menu That Stays Open

Slide menu

.menu {
  animation: slideIn 0.6s ease forwards;
}

⚡ Fill Mode + Forwards in Shorthand

Shorthand Usage

animation: fadeUp 1s ease-in-out 0.2s forwards;
Shorthand PartMeaning
fadeUpanimation-name
1sanimation-duration
ease-in-outanimation-timing-function
0.2sanimation-delay
forwardsanimation-fill-mode

🧠 Best Practices

  • Use forwards for reveal effects ⭐
  • Use both when using delay + final positioning
  • Avoid none unless you're animating purely decorative transitions
  • Use backwards to prevent “flash of unanimated content”
  • Test timing when mixing with animation-direction

🔍 Debugging Tips

  • If the animation snaps back, check if fill-mode is missing
  • If element is visible during delay, use backwards or both
  • Use DevTools → Animations panel to inspect final frames

🔗 Helpful Resources

>>“Fill mode completes your animation story — before, during, and after the motion.” 🎬✨