A CSS3 animation comprises keyframes for the web page style and design. The animation property has different styles to animate the element that passes through the required property. The css3 animation is used to show the animated functions on the web page. The css animation comes to the original state after completing the period and maintains upto the end state.
CSS3 resets the element to its original state or styling at the end of the animation unless deliberate steps are taken to retain it. The animation-fill-mode attribute determines the styling of the element at the beginning, end, or both the start and end times of the animation.
How to Approach
- The "animation-fill-mode" property keeps an element in its final state after an animation ends. CSS styles are applied to the element both before and after the animation. The "animation-fill-mode" attribute controls the animation plays.
- The "animation-fill-mode" property is set to "none" by default, meaning that when the animation is finished, the element will revert to its initial state. We can change the property to modify the animation behavior by changing it to one of the other possible values, such as a "forwards" value.
- When "animation-fill-mode" is set to "forwards," the element will keep the values of the last keyframe after the animation is finished. The element is used to effectively "freeze" in its final position. It allows the designs from the final keyframe to be applied until the element is animated or otherwise altered.
The "animation-fill-mode" Property
There are four possible values for the "animation-fill-mode" property:
- None: It is the standard setting of the animation. The element's initial styling is preserved both before and after the animation.
- Forwards: When the animation ends, the element keeps the calculated values of the last keyframe.
- Backward: Throughout the animation, the element adopts the styles specified in the initial keyframe.
- Both: After the animation is finished, the element adopts the styles specified in the calculated values of the first and final keyframes.
- You must set "animation-fill-mode" as a value of the animation property to meet user requirements.
Syntax
The syntax below is employed to preserve the final state of a CSS3 animation.
elements {
animation-name: my-animation;
animation-duration: 2s;
/* set the value: none/forward/backward / both */
animation-fill-mode: forwards ;
}
Description:
- The "animation-fill-mode" property within the "my-element" class is configured as "forwards."
- This class employs the "my-animation" animation, which lasts for two seconds, to maintain the final state of the animation.
Examples
The examples below demonstrate the utilization of CSS3 animation and how to maintain its final state.
Example 1:
The CSS3 animation employs the animation-fill-mode attribute with a value of none. This CSS animation operation at the end ensures the preservation of the final state by implementing the animated property and returning to the initial state.
<!DOCTYPE html>
<html>
<head>
<title> How to maintain the end state of a CSS3 animation </title>
<style>
.class1{
font-size:20px;
animation-name: my-animations;
animation-duration: 6s;
animation-fill-mode: none;
}
h2{
color : red;
font-family : Verdana, Geneva, Tahoma, sans-serif;
}
@keyframes my-animations {
0% {
color: red;
}
25% {
color: blue;
}
50% {
color: green;
}
75% {
color: grey;
}
100% {
color: pink;
}
}
</style>
</head>
<body>
<h2 id = "id1">C# Tutorial Website </h2>
<h3> How to maintain the end state of a CSS3 animation </h3>
<p class = "class1">
CSS3 reverts the element to its initial state or style once the animation is finished unless you take action to preserve it.
</p>
</body>
</html>
Output
The result displays the CSS animation in its final state.
Example 2:
The CSS3 animation employs the animation-fill-mode attribute with the forward setting. This feature of CSS animation ensures that the element retains the animated properties even after the animation ends. It maintains the styling from the last keyframe during the animation's conclusion.
<!DOCTYPE html>
<html>
<head>
<title> How to maintain the end state of a CSS3 animation </title>
<style>
#id1{
font-size:40px;
animation-name: my-animations;
animation-duration: 6s;
animation-fill-mode: forward;
}
h3{
color : red;
font-family : Verdana, Geneva, Tahoma, sans-serif;
}
@keyframes my-animations {
0% {
color: red;
}
25% {
color: blue;
}
50% {
color: green;
}
75% {
color: grey;
}
100% {
color: pink;
}
}
</style>
</head>
<body>
<h2 id = "id1">C# Tutorial Website </h2>
<h3> How to maintain the end state of a CSS3 animation </h3>
<p class = "class1">
CSS3 reverts the element to its initial state or style once the animation is finished unless you take action to preserve it.
</p>
</body>
</html>
Output
The result displays the CSS animation in its final state.
Example 3:
The animation-fill-mode property in CSS3 animations is employed with both values. This operation ensures that the CSS animation maintains the end state, allowing for the application of the animated property.
<!DOCTYPE html>
<html>
<head>
<title> How to maintain the end state of a CSS3 animation </title>
<style>
.my-element {
display: flex;
position: absolute;
width: 450px;
height: 210px;
align-items: center;
justify-content: center;
background-color: almond;
position: relative;
animation-name: my-animation;
animation-duration: 4s;
animation-fill-mode: both;
}
p {
position: absolute;
color: yellow;
border: 2px solid black;
font-family: Verdana, Geneva, Tahoma, sans-serif;
background-color: grey;
}
@keyframes my-animation {
25% {
width: 500px;
height: 420px;
background-color: pink;
}
50% {
width: 360px;
height: 390px;
background-color: aqua;
}
100% {
width: 450px;
height: 220px;
background-color: orange;
}
}
</style>
</head>
<body>
<h2 id = "id1">C# Tutorial Website </h2>
<div class = "my-element">
<p class = "class1">
CSS3 reverts the element to its initial state or style once the animation is finished unless you take action to preserve it.
</p>
</div>
<h3> How to maintain the end state of a CSS3 animation </h3>
</body>
</html>
Output
The result displays the CSS animation in its final state.
Example 4:
The CSS3 animation makes use of the animation-fill-mode property set to the value of backward. This property ensures that the CSS animation retains its final state, allowing the element to preserve the styles defined in the previous keyframe even after the animation has ended.
<!DOCTYPE html>
<html>
<head>
<title> How to maintain the end state of a CSS3 animation </title>
<style>
body{
background-color: beige;
}
.my-element {
display: flex;
position: absolute;
width: 200px;
height: 200px;
align-items: center;
justify-content: center;
background-color: almond;
position: relative;
animation-name: my-animation;
animation-duration: 4s;
animation-fill-mode: backward;
}
p {
position: absolute;
color: yellow;
border: 2px solid black;
font-family: Verdana, Geneva, Tahoma, sans-serif;
background-color: grey;
}
@keyframes my-animation {
25% {
width: 500px;
height: 420px;
background-color: pink;
}
50% {
width: 360px;
height: 390px;
background-color: aqua;
}
100% {
width: 450px;
height: 220px;
background-color: orange;
}
}
</style>
</head>
<body>
<h2 id = "id1">C# Tutorial Website </h2>
<h3> How to maintain the end state of a CSS3 animation </h3>
<div class = "my-element">
<p class = "class1">
CSS3 reverts the element to its initial state or style once the animation is finished unless you take action to preserve it.
</p>
</div>
</body>
</html>
Output
The result displays the CSS animation in its final state.
Browser Support
Indicate the initial browser version that comprehensively backs the attribute.
The followed by -Moz-, -webkit-, or -o- shows the first version that worked with a prefix animation-fill-mode.
- Internet explore
- Chrome browser
- Safari browser
- Opera browser
Conclusion
CSS animation can be preserved in its final state thanks to the straightforward css-animation-fill property. This property assists in retaining the end state by utilizing directional values.