Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to set the fill-mode for an Animation with CSS
The CSS animation-fill-mode property defines which values are applied by the animation before it starts and after it ends. This property controls whether an element retains the animation's initial or final styles when the animation is not running.
Syntax
selector {
animation-fill-mode: value;
}
Possible Values
| Value | Description |
|---|---|
none |
Default. Animation does not apply any styles before or after execution |
forwards |
Element retains the styles from the last keyframe after animation ends |
backwards |
Element gets the styles from the first keyframe before animation starts |
both |
Animation follows rules for both forwards and backwards |
Example: Using Forwards Fill Mode
The following example demonstrates how the forwards value keeps the final animation state after completion −
<!DOCTYPE html>
<html>
<head>
<style>
.animated-box {
width: 150px;
height: 100px;
position: relative;
background: red;
animation-name: slideAnimation;
animation-duration: 2s;
animation-fill-mode: forwards;
margin: 20px 0;
}
@keyframes slideAnimation {
from {
left: 0px;
background-color: red;
}
to {
left: 200px;
background-color: blue;
}
}
</style>
</head>
<body>
<div class="animated-box"></div>
</body>
</html>
A red box slides 200px to the right while changing to blue color over 2 seconds. After the animation completes, the box remains blue and stays at the final position (200px from left) instead of returning to its original red color and position.
Example: Comparing Different Fill Modes
Here's a comparison showing how different animation-fill-mode values behave −
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 50px;
background: gray;
margin: 10px 0;
position: relative;
animation-name: colorChange;
animation-duration: 3s;
animation-delay: 1s;
}
.forwards { animation-fill-mode: forwards; }
.backwards { animation-fill-mode: backwards; }
.both { animation-fill-mode: both; }
.none { animation-fill-mode: none; }
@keyframes colorChange {
0% { background: green; left: 0px; }
100% { background: purple; left: 150px; }
}
</style>
</head>
<body>
<div class="box forwards">forwards</div>
<div class="box backwards">backwards</div>
<div class="box both">both</div>
<div class="box none">none</div>
</body>
</html>
Four gray boxes demonstrate different fill modes: - "forwards": Stays gray during 1s delay, animates to purple position, remains purple after completion - "backwards": Turns green immediately (first keyframe), animates, returns to gray after completion - "both": Turns green immediately, animates, stays purple after completion - "none": Stays gray during delay, animates, returns to gray after completion
Conclusion
The animation-fill-mode property gives you precise control over an element's appearance before and after animations. Use forwards to maintain final styles, backwards for initial styles during delays, and both for complete control.
Updated on: 2026-03-15T12:42:00+05:30
76 Views
Advertisements