animation-fill-mode

Definition

The animation-fill-mode CSS property is used to define how a CSS animation should apply styles to its target before and after it is executing.

.element {
  animation-fill-mode: forwards;
}

Syntax

.alert {
  animation-fill-mode: forwards;
}

Values

none, forwards, backwards, both.

Practical Examples

.alert {
  animation: slide-down 200ms ease-out forwards;
  animation-fill-mode: forwards;
}

Fill modes control whether the animated state persists before/after execution.

HTML

Sliding alert

Code

<style>
@keyframes slide-down-fill-demo { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.slide-down-fill-demo { animation: slide-down-fill-demo 0.2s ease-out forwards; }
</style>
<div class="overflow-hidden rounded-xl border border-slate-200 bg-white">
  <div class="bg-sky-500 p-4 text-sm font-semibold text-white slide-down-fill-demo">Sliding alert</div>
</div>

Tips & Best Practices

Use forwards to keep elements visible after entrance animations.
Combine backwards with delays so the element adopts initial keyframe styles immediately.

Accessibility & UX Notes

Persisted animated states can impact layout—ensure screen readers receive updated semantics.

Browser Support

Supported in all modern browsers.

animation shorthand.
animation-direction for reversing sequences.
transform to define animated properties.