CSS animation-fill-mode Property

CSS animation-fill-mode Property

The animation-fill-mode property in CSS defines how an animated element should behave before and after the animation runs.

1. Syntax

selector {
  animation-fill-mode: value;
}

2. Accepted Values

Value	Description
none (default)	The element does not retain any animation styles before or after it runs.
forwards	The element keeps the last frame of the animation after it completes.
backwards	The element applies the first frame of the animation before it starts.
both	Combines forwards and backwards, keeping both the first and last frames.

3. Example – Using forwards (Keeps Last Frame)

.box {
  width: 100px;
  height: 100px;
  background: red;
  animation: move 3s forwards;
}

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

✅ The box stays at the last position after the animation ends.

4. Example – Using backwards (Applies First Frame Early)

.box {
  animation: move 3s 2s backwards;
}

@keyframes move {
  from { opacity: 0; }
  to { opacity: 1; }
}

✅ The box starts invisible during the 2-second delay.

5. Example – Using both (Keeps First & Last Frames)

.box {
  animation: move 3s both;
}

@keyframes move {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

✅ The box starts small (before animation) and stays large (after animation).

6. Best Practices

✔ Use forwards to maintain the final animation effects.
✔ Use backwards when using animation-delay for smoother transitions.
✔ Use both when you need a smooth entry and exit effect.