How to maintain the final state at end of a CSS3 animation ?

Last Updated : 10 Mar, 2023

When you create a CSS3 animation, the element being animated moves through a series of keyframes, each with its own set of styles. When the animation is complete, the element may return to its original state or style, unless you take steps to maintain the final state.

Approach:

To maintain the final state of an element after an animation completes, you can use the ‘animation-fill-mode’ property. This property controls what styles are applied to the element before and after the animation runs.
By default, the ‘animation-fill-mode‘ property is set to “none”, which means that the element will return to its original state after the animation completes. However, you can change this behavior by setting the ‘animation-fill-mode’ property to one of the other available values, such as “forwards”.
When you set ‘animation-fill-mode’ to “forwards”, the element will retain the computed values of the final keyframe after the animation completes. In other words, the element will “freeze” in its final position, and the styles from the final keyframe will be applied to the element until they are changed by other styles or animations.

The ‘animation-fill-mode’ property has four possible values:

none: The default value. The element retains its original styling before and after the animation.
forwards: The element retains the computed values of the final keyframe after the animation completes.
backwards: The element takes on the styles defined in the first keyframe for the duration of the animation.
both: The element takes on both the styles defined in the first keyframe and the computed values of the final keyframe after the animation completes.

To use ‘animation-fill-mode’, you need to specify it as a value of the animation property.

Syntax :

.my-element {
     animation-name: my-animation;
     animation-duration: 2s;
     /* none / forward / backward / both */
     animation-fill-mode: forwards ;
}

The ‘my-element’ class uses the ‘my-animation’ animation, which lasts for 2 seconds, to maintain the final state of the animation by setting the ‘animation-fill-mode’ property to “forwards”.

Example 1:The HTML document with a div element that changes the text color over time using keyframes has a 5-second animation applied to it. The animation is set to not persist after it ends.

HTML

<!DOCTYPE html> 
<html> 
<head> 
   <title>animation-fill-mode: none</title> 
   <style> 
        .my-element { 
            font-size:20px; 
            animation-name: my-animation; 
            animation-duration: 5s; 
            animation-fill-mode: none; 
        } 
        h1{ 
            color : green; 
            font-family : Verdana, Geneva, Tahoma, sans-serif; 
        } 
  
        @keyframes my-animation { 
            0% { 
                color: red; 
            } 
            25% { 
                color: blue; 
            } 
            50% { 
                color: green; 
            } 
            75% { 
                color: grey; 
            }            
            100% { 
                color: pink; 
            } 
        } 
   </style> 
 </head> 
<body> 
    <h1>GeeksforGeeks</h1> 
    <div class="my-element"> 
        Hello, world!<br> It's animation-fill-mode: none; 
    </div> 
 </body> 
</html>

Output:

Example 2: This is an HTML document that contains a div element that changes the element’s size and background color over time using keyframes with a 4-second animation applied to it. The animation-fill-mode property is set to “both”, which means that the element will retain the styles defined in the keyframes before and after the animation plays.

HTML

<!DOCTYPE html> 
<html> 
<head> 
   <title>animation-fill-mode: both</title> 
   <style> 
        .my-element { 
            display: flex; 
            position: absolute; 
            width: 500px; 
            height: 200px; 
            align-items: center; 
            justify-content: center; 
            background-color: almond; 
            position: relative; 
            animation-name: my-animation; 
            animation-duration: 4s; 
            animation-fill-mode: both; 
        } 
        h1 { 
            position: absolute; 
            color: green; 
            font-family: Verdana, Geneva, Tahoma, sans-serif; 
        } 
  
        @keyframes my-animation { 
            25% { 
                width: 600px; 
                height: 400px; 
                background-color: pink; 
            } 
            50% { 
                width: 350px; 
                height: 400px; 
                background-color: aqua; 
            } 
            100% { 
                width: 500px; 
                height: 200px; 
                background-color: tan; 
            } 
        } 
   </style> 
</head> 
<body> 
    <div class="my-element"> 
        <h1>GeeksforGeeks</h1> 
    </div> 
</body> 
</html> 
  