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

16.0 5.0 -moz-	9.0 4.0 -webkit-	43.0 4.0 -webkit-	10.0	30.0 15.0 -webkit- 12.0 -o-

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 (considering the animation's direction). This means that after the animation ends, the element keeps the styles from the end of the animation.
• Backwards: The element will receive the style values from the first keyframe as soon as the animation is applied before it officially begins. This is useful for setting an initial state for entering animations.
• Both: Applies the rules for both forwards and backward. The element maintains the style state from the first keyframe before the animation starts and retains the last keyframe's styles after the animation ends.

Ryan Parker

Ryan has been a standout in digital marketing since 2010. He's the go-to person for getting businesses noticed online, with over 300 projects under his belt—these range from helping local business owners to big online stores. As the Head of Digital Marketing at Webzstore Solutions, Ryan knows all the tricks to make companies shine on the internet. He's excellent at using the latest tech and smart strategies to get results. Ryan is all about making businesses grow and reach more people online.

All Posts Website