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
Set a CSS style for the element when the animation is not playing
The CSS animation-fill-mode property controls how an element's styles are applied before and after an animation runs. This property determines which styles are applied when the animation is not playing.
Syntax
selector {
animation-fill-mode: value;
}
Possible Values
| Value | Description |
|---|---|
none |
No styles are applied before or after animation (default) |
forwards |
Keeps the final keyframe styles after animation ends |
backwards |
Applies the first keyframe styles before animation starts |
both |
Applies both forwards and backwards fill modes |
Example: Using Backwards Fill Mode
The following example demonstrates how animation-fill-mode: backwards applies the starting keyframe styles before the animation begins −
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 150px;
height: 200px;
position: relative;
background: red;
animation-name: moveBox;
animation-duration: 2s;
animation-fill-mode: backwards;
animation-delay: 1s;
}
@keyframes moveBox {
from {
left: 0px;
background-color: green;
}
to {
left: 200px;
background-color: blue;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
A green box appears on the left side during the delay period, then animates to the right while changing from green to blue over 2 seconds. The backwards fill mode ensures the element starts with the "from" keyframe styles (green background) even during the animation delay.
Example: Using Forwards Fill Mode
This example shows how animation-fill-mode: forwards keeps the final animation state after completion −
<!DOCTYPE html>
<html>
<head>
<style>
.forward-box {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: slideRight 3s forwards;
}
@keyframes slideRight {
to {
left: 300px;
background-color: purple;
border-radius: 50%;
}
}
</style>
</head>
<body>
<div class="forward-box"></div>
</body>
</html>
A red square starts on the left, animates to the right while becoming a purple circle, and remains in its final position and style after the animation completes.
Conclusion
The animation-fill-mode property is essential for controlling element appearance before and after animations. Use backwards to apply starting styles during delays, forwards to maintain final styles, or both for complete control.
Updated on: 2026-03-15T12:46:23+05:30
145 Views
Advertisements