CSS 'animation-fill-mode' Property Explained

The CSS 'animation-fill-mode' property specifies how a CSS animation should apply styles to its target before and after its execution. Essentially, it controls what happens to the animated element outside of the time the animation is running. This property can be used to maintain the style state of an element at either the start or the end of an animation or both.

CSS 'animation-fill-mode' Property Examples

See the Pen CSS 'animation-fill-mode' Property by Webzstore (@webzstore) on CodePen.

The 'animation-fill-mode' property provides crucial control over the before-and-after states of an animated element, allowing for more seamless and integrated animations within the user interface.

Browser Support For 'animation-fill-mode' Property

Source: MDN browser-compat-data 8.1.4, checked 3 October 2026. Prefixed support and implementations that were later removed are not counted, and some browsers list partial support or extra values. See the MDN reference for animation-fill-mode for the full compatibility details, including mobile browsers.

CSS Syntax of the 'animation-fill-mode' Property

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

Usage of the 'animation-fill-mode' Property

This property is handy when you want an element to retain the style values from either the start or end keyframes of an animation rather than reverting to its initial styles after the animation completes. It's also handy for setting up an element's style before the start of an animation.

Property Values of the 'animation-fill-mode' Property

• None: The default value. The animation does not apply any styles to the target before or after it executes. Once the animation completes, the element will revert to its initial style.
• Forwards: The element will retain the style values set by the last keyframe reached (considering the animation's direction and iteration count). With normal direction that is the 100% (to) keyframe; with reverse it is the 0% (from) keyframe; with the alternating directions it depends on whether the iteration count is odd or even. After the animation ends, the element keeps those styles.
• Backwards: The element receives the style values from the first relevant keyframe as soon as the animation is applied, and keeps them during the animation-delay period before the animation officially begins. Which keyframe is "first" depends on animation-direction: with normal or alternate it is the 0% (from) keyframe, but with reverse or alternate-reverse it is the 100% (to) keyframe. This is useful for setting an initial state for entering animations.
• Both: Applies the rules for both forwards and backwards. The element takes the first relevant keyframe's styles before the animation starts (including during the delay) and retains the last relevant keyframe's styles after the animation ends, with both keyframes chosen according to the animation direction.