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
With CSS set the element to retain the style values that are set by the last keyframe
The CSS animation-fill-mode property with the forwards value is used to retain the style values that are set by the last keyframe when the animation completes. This prevents the element from reverting to its original state after the animation ends.
Syntax
selector {
animation-fill-mode: forwards;
}
Example
The following example demonstrates how an element retains the final animation state using animation-fill-mode: forwards −
<!DOCTYPE html>
<html>
<head>
<style>
.animated-box {
width: 150px;
height: 100px;
background-color: red;
position: relative;
animation-name: moveAndChange;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes moveAndChange {
0% {
left: 0px;
background-color: red;
border-radius: 0;
}
100% {
left: 200px;
background-color: blue;
border-radius: 20px;
}
}
</style>
</head>
<body>
<div class="animated-box"></div>
</body>
</html>
A red rectangular box animates over 3 seconds, moving 200px to the right while changing to blue color and gaining rounded corners. After the animation completes, the box remains blue with rounded corners at the final position instead of reverting to its original red state.
Key Points
- Without
forwards, the element would return to its original styling after animation completion - The
forwardsvalue applies the styles from the last keyframe (100% or "to") - This is particularly useful for one-time animations that should maintain their end state
Conclusion
Using animation-fill-mode: forwards ensures that animated elements retain their final keyframe styles, creating smooth transitions that don't snap back to the original state when the animation completes.
Updated on: 2026-03-15T12:42:26+05:30
240 Views
Advertisements