The CSS animation-fill-mode property dictates the styles an element will have before the animation begins and after it concludes. This property is crucial for controlling the visual state of an element outside of its animation sequence, preventing abrupt style changes.
Example 1: animation-fill-mode: none
/* This div will be our animated element */
.box-none {
width: 100px;
height: 100px;
background-color: steelblue;
position: relative;
animation-name: move-right;
animation-duration: 3s;
animation-delay: 2s;
/* With 'none', styles from the animation are not applied before or after */
animation-fill-mode: none;
}
/* The keyframes define the animation's start and end states */
@keyframes move-right {
from {
left: 0px;
background-color: steelblue;
}
to {
left: 200px;
background-color: crimson;
}
}
Explanation none is the default value. The animation will not apply any styles to the element before it starts or after it finishes, so the element reverts to its original styles.
Example 2: animation-fill-mode: forwards
/* This div will retain the styles of the last keyframe */
.box-forwards {
width: 100px;
height: 100px;
background-color: steelblue;
position: relative;
animation-name: move-right;
animation-duration: 3s;
animation-delay: 2s;
/* 'forwards' ensures the element keeps the styles from the 100% keyframe */
animation-fill-mode: forwards;
}
/* Keyframes define the animation's progression */
@keyframes move-right {
from {
left: 0px;
}
to {
left: 200px;
background-color: crimson;
}
}
Explanation The forwards value causes the element to retain the computed styles from the very last keyframe after the animation has finished. In this case, the box stays 200px to the right and remains crimson.
Example 3: animation-fill-mode: backwards
/* This div will get the first keyframe's styles during the delay */
.box-backwards {
width: 100px;
height: 100px;
background-color: steelblue; /* Initial style */
position: relative;
animation-name: move-and-change-color;
animation-duration: 3s;
animation-delay: 2s;
/* 'backwards' applies the 0% keyframe styles during the animation-delay period */
animation-fill-mode: backwards;
}
/* Keyframes define the animation's start and end points */
@keyframes move-and-change-color {
from {
left: 0px;
background-color: gold; /* Style applied during delay */
}
to {
left: 200px;
background-color: crimson;
}
}
Explanation With backwards, the styles of the first relevant keyframe (the from or 0% selector) are applied to the element during the animation-delay period. As soon as the animation starts, the element’s background becomes gold.
Example 4: animation-fill-mode: both
/* This div combines the effects of 'forwards' and 'backwards' */
.box-both {
width: 100px;
height: 100px;
background-color: steelblue;
position: relative;
animation-name: move-and-change-color;
animation-duration: 3s;
animation-delay: 2s;
/* 'both' applies styles from the first keyframe during delay and the last keyframe after */
animation-fill-mode: both;
}
/* The keyframes for the animation sequence */
@keyframes move-and-change-color {
from {
left: 0px;
background-color: gold;
}
to {
left: 200px;
background-color: crimson;
}
}
Explanation The both value extends the animation's styles in both directions. It applies the styles from the first keyframe during the delay period and retains the styles from the last keyframe after the animation completes.
Example 5: Multiple comma-separated animations
/* This element has two animations with different fill modes */
.box-multiple {
width: 100px;
height: 100px;
background-color: steelblue;
position: relative;
animation-name: move-right, fade-in;
animation-duration: 3s, 2s;
animation-delay: 1s, 1s;
/* Fill modes are applied to animations in the order they are listed */
animation-fill-mode: forwards, backwards;
}
/* First animation: moves the box */
@keyframes move-right {
to { left: 200px; }
}
/* Second animation: fades the box in */
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
Explanation When using multiple animations, you can specify a unique animation-fill-mode for each one. Here, the move-right animation will hold its final state (forwards), while fade-in applies its initial state during the delay (backwards).
Example 6: Using animation shorthand property
/* The shorthand property simplifies the declaration */
.box-shorthand {
width: 100px;
height: 100px;
background-color: steelblue;
position: relative;
/* The shorthand: name duration delay fill-mode */
animation: move-right 3s 2s forwards;
}
/* Keyframes define where the animation ends */
@keyframes move-right {
to {
left: 200px;
background-color: crimson;
}
}
Explanation The animation shorthand property provides a more concise way to write your animation rules. The animation-fill-mode value (forwards in this case) is simply included as part of the single-line declaration.
Example 7: Practical use with a fade-out effect
/* This element will fade out and stay hidden */
.box-fade-out {
width: 100px;
height: 100px;
background-color: rebeccapurple;
/* Using forwards is essential for a "disappear" effect */
animation: fade-out 2s 1s forwards;
}
/* The animation fades opacity from full to none */
@keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
Explanation animation-fill-mode: forwards is particularly useful for effects like making an element disappear. Without it, the element would fade to an opacity of 0 and then instantly reappear once the animation duration is over.