#animation-fill-mode

#Introduction

animation-fill-mode property sets how a CSS animation applies styles to its target before and after its execution.

#Examples

css-apisrc/animation-fill-mode/App.tsx

Code

Preview

#Syntax

/* Single animation */
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;

/* Multiple animations */
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;

#Values

#none

Default value. The animation will not apply any styles to the target when it's not executing. The element will display using the CSS rules that have already been applied to it. This is the default value.

#forwards

The target will retain the computed values set by the last keyframe encountered during execution. The last keyframe depends on the values of animation-direction and animation-iteration-count:

#backwards

The animation will apply the values defined in the first keyframe at the start of the animation. The first keyframe depends on the value of animation-direction:

#both

The animation will follow both the forwards and backwards rules, applying the keyframe values both before and after the animation.

#Formal definition

#Formal syntax

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

#See also

• animation
• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state
• CSS animation event
• Animated API

#Compatibility