How to Stop an Animation at the End When it Finishes?

When we apply animation on an element using CSS, it instantly jumps back to its initial state just after finishing the animation. This is the default behavior of CSS animations.

However, most of the time, we want to stop the animation at the end when it finishes. So, how to do that?

Well, if you want to stop the animation at the end and not return to its initial state when it finishes, you have to simply set the animation-fill-mode property to forwards.

Here is a working example:

Example:

div{
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background: orange;
   position: relative;
   animation-name: move;
   animation-duration: 5s;
   animation-fill-mode: forwards;
}
@keyframes move{
   0%{
       left: 0;
   }
   100%{
       left: 90%;
   }
}

You can also specify the animation-fill-mode value in the animation shorthand property.

Here is the same example as above but with the shorthand property:

Example:

div{
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background: orange;
   position: relative;
   animation: move 5s forwards;
}
@keyframes move{
   0%{
       left: 0;
   }
   100%{
       left: 90%;
   }
}

You can read more about CSS animations here -> CSS animations complete guide