The animation-fill-mode property is used to specify the values that are applied by the animation before and after it is executed. Before playing the first keyframe or after playing the last keyframe CSS animations do not affect the element. The animation-fill-mode property can override this behavior.
Syntax:
animation-fill-mode: none | forwards | backwards | both | initial |
inherit;
Property Value: The animation-fill-mode property contains many values which are listed below:
- none: It is the default value. The animation properties will not apply to any element before or after it is executed.
- forwards: The element will retain the same animation properties of the last keyframe after the animation completes.
- backwards: This property value is used to set the element to the first keyframe value before starting the animation.
- both: This property is used to follow the rules for both forwards and backward.
- initial: This property is used to set the property to its default value.
- inherit: This property is used to inherit this property from its parent element.
Example: In this example, we are using the above-explained property.
html
<!DOCTYPE html><html>
<head>
<title>
CSS | animation-fill-mode Property
</title>
<style>
h1 {
color: green;
}
h1,
p {
text-align: center;
}
h2 {
width: 400px;
background-color: orange;
animation-name: text;
animation-duration: 3s;
}
#one {
animation-fill-mode: none;
}
#two {
animation-fill-mode: forwards;
}
#three {
animation-fill-mode: backwards;
animation-delay: 2s;
}
#four {
animation-fill-mode: both;
animation-delay: 2s;
}
@keyframes text {
from {
margin-left: 0%;
background-color: #aaaaaa;
}
to {
margin-left: 60%;
background-color: #008000;
}
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>A computer science portal for geeks</p>
<h2 id="one">none</h2>
<h2 id="two">forwards</h2>
<h2 id="three">backwards</h2>
<h2 id="four">both</h2>
</body>
</html>
|
Output:
- Google Chrome 43.0
- Edge 12.0
- Firefox 16.0
- Opera 30.0
- Safari 9.0