CSS animation-fill-mode Property
February 10, 2021 12:37 pm IST
CSS animation-fill-mode Property CSS animation-fill-mode property sets how a CSS animation applies styles to its target before and after its execution.
Example <!DOCTYPE html>
<html lang ="en-US" >
<head >
<style >
div {
width : 100px ;
height : 100px ;
line-height : 5 ;
text-align : center ;
border : 1px solid #000 ;
background : #39ac39 ;
-webkit- animation : myAnimation 1s 1 ; /* Safari 4.0 - 8.0 */
animation : myAnimation 1s 1 ;
-webkit- animation-delay : 2s ; /* Safari 4.0 - 8.0 */
animation-delay : 2s ;
background : #39ac39 ;
}
#point {
-webkit- animation-fill-mode : none ;
animation-fill-mode : none ;
}
#point1 {
-webkit- animation-fill-mode : forwards ;
animation-fill-mode : forwards ;
}
#point2 {
-webkit- animation-fill-mode : backwards ;
animation-fill-mode : backwards ;
}
#point3 {
-webkit- animation-fill-mode : both ;
animation-fill-mode : both ;
}
@-webkit-keyframes myAnimation {
from {border-radius : 0% ; background : #f69d3c ;}
to {border-radius : 50% ; background : #0066ff }
}
@keyframes myAnimation {
from {border-radius : 0% ; background : #f69d3c ;}
to {border-radius : 50% ; background : #0066ff }
}
</style >
</head >
<body >
<h1 >CSS animation-fill-mode Property</h1 >
<h2 >animation-fill-mode: none;</h2 >
<div id ="point" >
div
</div >
<h2 >animation-fill-mode: forwards;</h2 >
<div id ="point1" >
div
</div >
<h2 >animation-fill-mode: backwards;</h2 >
<div id ="point2" >
div
</div >
<h2 >animation-fill-mode: both;</h2 >
<div id ="point3" >
div
</div >
</body >
</html >
Syntax Using CSS element{
animation-fill-mode: backwards;
}
Using Javascript object.style.animationFillMode="backwards";
Animatable No, animation-fill-mode property is not animatable. CSS Animatable Properties Reference.
Default Value Default value for CSS animation-fill-mode property is none .
Property Value The following table provides a list of values for CSS animation-fill-mode property.
Value Explanation none Specifies that the animation will not apply any styles to the target when it's not executing. forwards Specifies that the target will retain the computed values set by the last keyframe encountered during execution. backwards Specifies that the animation will apply the values defined in the first relevant keyframe as soon as it is applied to the target, and retain this during the animation-delay period. both Specifies that the animation will follow the rules for both forwards and backwards, thus extending the animation properties in both directions.
Using JavaScript In the following example, we will demonstrate how to change the CSS animation-fill-mode property of an element using JavaScript.
Example <!DOCTYPE html>
<html lang ="en-US" >
<head >
<style >
div {
width : 100px ;
height : 100px ;
line-height : 6 ;
text-align : center ;
border : 1px solid #000 ;
background : #39ac39 ;
margin-bottom : 20px ;
}
@-webkit-keyframes myAnimation {
from {border-radius : 0% ; background : #f69d3c ;}
to {border-radius : 50% ; background : #0066ff }
}
@keyframes myAnimation {
from {border-radius : 0% ; background : #f69d3c ;}
to {border-radius : 50% ; background : #0066ff }
}
</style >
</head >
<body >
<h1 >CSS animation-fill-mode Property</h1 >
<div >
Div
</div >
<button onclick ="myFunction()" >Click Me</button >
<script >
var x = document .getElementsByTagName ("div" )[0 ];
function myFunction (){
x .style .animation = "myAnimation 1s 1" ;
x .style .WebkitAnimation = "myAnimation 1s 1" ;
x .style .animationDelay = "1s" ;
x .style .WebkitAnimationDelay = "1s" ;
x .style .animationFillMode = "both" ;
x .style .WebkitAnimationFillMode = "both" ;
}
</script >
</body >
</html >
Reminder Hi Developers, we almost covered 98.7% of CSS Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in CSS .
Please do google search for:
Join Our Channel Join our telegram channel to get an instant update on depreciation and new features on HTML , CSS , JavaScript , jQuery , Node.js , PHP and Python .
This channel is primarily useful for Full Stack Web Developer.
Share this Page Meet the Author 
