CSS animation-fill-mode property
The animation-fill-mode property in CSS specifies how the styles of an animation should be applied before and after its execution. It controls whether the animation's styles should be applied to the element when the animation is not playing, such as before it starts or after it ends. This property is useful for maintaining the final state of the animation or for ensuring that the animation's effects are visible at specific times.
Syntax
element {
animation-fill-mode: mode;
}
mode: Defines how the animation's styles are applied. It can be one of the following values:noneforwardsbackwardsboth
Values
none:- The default value. The animation will not apply any styles before it starts or after it ends. The element will revert to its original state before and after the animation.
animation-fill-mode: none;forwards:- The animation's final keyframe styles will be applied after the animation ends. The element retains the styles from the last keyframe after the animation has completed.
animation-fill-mode: forwards;backwards:- The animation's initial keyframe styles will be applied before the animation starts. The element retains the styles from the first keyframe while the animation is waiting to start.
animation-fill-mode: backwards;both:- The element will apply the styles from the first keyframe before the animation starts and the styles from the last keyframe after the animation ends. This value combines
backwardsandforwards.
animation-fill-mode: both;- The element will apply the styles from the first keyframe before the animation starts and the styles from the last keyframe after the animation ends. This value combines
Example
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Fill Mode Example</title>
<style>
@keyframes slideIn {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.box-none {
width: 100px;
height: 100px;
background-color: red;
animation-name: slideIn;
animation-duration: 2s;
animation-fill-mode: none;
}
.box-forwards {
width: 100px;
height: 100px;
background-color: green;
animation-name: slideIn;
animation-duration: 2s;
animation-fill-mode: forwards;
}
.box-backwards {
width: 100px;
height: 100px;
background-color: blue;
animation-name: slideIn;
animation-duration: 2s;
animation-fill-mode: backwards;
}
.box-both {
width: 100px;
height: 100px;
background-color: orange;
animation-name: slideIn;
animation-duration: 2s;
animation-fill-mode: both;
}
</style>
</head>
<body>
<div class="box-none"></div>
<div class="box-forwards"></div>
<div class="box-backwards"></div>
<div class="box-both"></div>
</body>
</html>
Explanation:
@keyframes slideIn:- Defines an animation that moves the element from left to right and fades it in.
.box-none:- The
animation-fill-modeis set tonone, so the element will not retain any styles before or after the animation. It will not show the final state of the animation when it ends.
- The
.box-forwards:- The
animation-fill-modeis set toforwards, so the element retains the styles from the last keyframe after the animation ends.
- The
.box-backwards:- The
animation-fill-modeis set tobackwards, so the element applies the styles from the first keyframe before the animation starts.
- The
.box-both:- The
animation-fill-modeis set toboth, so the element retains styles from both the first and last keyframes, applying them before and after the animation.
- The
Important Points
Default Value:
- The default value is
none, meaning the element will not retain any animation styles outside of the animation duration.
- The default value is
Combining with Animation Duration:
- The
animation-fill-modeproperty works alongsideanimation-duration. For instance, ifanimation-durationis set to2sandanimation-fill-modeis set toforwards, the element will retain the styles from the final keyframe after the 2-second animation ends.
- The
Practical Use Cases:
forwardsis useful when you want the element to remain in its final state after the animation ends.backwardsis useful for ensuring the element shows its initial state even before the animation starts.bothis helpful when you want to apply styles before and after the animation.