animation-fill-mode
Determines what style state an element maintains before and after animation. Use afmf to retain the last keyframe state after animation ends.
Class List
| Class | CSS | Description |
|---|---|---|
afmn | animation-fill-mode: none | Default. Keyframe styles not applied before/after animation |
afmf | animation-fill-mode: forwards | Retains last keyframe state after completion |
afmb | animation-fill-mode: backwards | Pre-applies first keyframe style before start |
afmbf | animation-fill-mode: both | Applies both forwards and backwards |
Behavior Comparison
Compares how each fill-mode value affects element state before and after animation.
| Value | Before execution | After execution |
|---|---|---|
afmn | Keeps original styles | Returns to original styles |
afmf | Keeps original styles | Keeps last keyframe |
afmb | Applies first keyframe | Returns to original styles |
afmbf | Applies first keyframe | Keeps last keyframe |
Class Details
afmnanimation-fill-mode: none
Default. Element retains original style when animation is not running. Keyframe styles not applied before or after.
<!-- Default: keeps original styles before and after animation -->
<div class="afmn">
Returns to original state when animation ends
</div>afmfanimation-fill-mode: forwards
Retains last keyframe style after animation ends. Most commonly used fill-mode, essential for fade-in or slide-in entry animations.
<!-- Keeps final state after fade-in -->
<div class="afmf">
Keeps last keyframe after animation ends
</div>
<!-- Practical: entrance animation -->
<div class="o0 afmf">
Starts at opacity: 0 → animates to 1 →
afmf keeps opacity: 1
</div>Most common pattern
afmf prevents the element from reverting after animation ends. Essential for fade-in, slide-in entry animations.
afmbanimation-fill-mode: backwards
Pre-applies first keyframe style before animation starts (during animation-delay). Prevents flicker in delayed animations.
<!-- Applies first keyframe during delay -->
<div class="afmb">
First keyframe styles applied even during delay
</div>
<!-- Practical: prevent flicker in fade-in with delay -->
<div class="afmb">
Prevents element from appearing then disappearing during delay
</div>afmbfanimation-fill-mode: both
Applies both forwards and backwards. First keyframe during delay, last keyframe after completion.
<!-- Applies both forwards + backwards -->
<div class="afmbf">
First keyframe during delay + keeps last keyframe after end
</div>
<!-- Practical: when both delay + state retention are needed -->
<div class="o0 afmbf">
Stays transparent during delay → animates → stays opaque after end
</div>Tips
Using afmbf in delayed animations prevents pre-start flicker and maintains post-completion state.
Tips & Notes
forwards vs both
Without delay, afmf and afmbf behave identically. Backwards only differs with delay.
Flicker with none
Default afmn reverts to original style on end. Use afmf to avoid flicker in entry animations.