Jobs Hub

CSS animation-fill-mode

The CSS animation-fill-mode property is used to define style when the animation is not playing. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      div#mydiv {width: 50px; height: 50px; border-radius: 50%;
         background-color: maroon; position: relative;
         animation-name: fresherearth; animation-duration: 2s;
         animation-fill-mode: forwards; }
      @keyframes fresherearth {
         0% {left: 0px; top: 0px;}
         33% {left: 220px; top: 220px;}
         66% {left: 0px; top: 220px;}
         100% {left: 220px; top: 0px;}
      }
   </style>
</head>
<body>

   <div id="mydiv"></div>
   
</body>
</html>
Output

Since the animation-fill-mode property is defined with forwards, therefore the animation element (DIV with id mydiv) will retain to its last style value, that is left: 220px; top: 0px;, after the end of animation.

Note - The animation-name is used to define a name for an animation.

Note - The animation-duration is used to define time to complete one iteration or cycle of an animation.

Note - The @keyframes is used to define the change in styles for multiple times in one cycle of selected animation.

CSS animation-fill-mode Syntax

The syntax of animation-fill-mode property in CSS, is:

animation-fill-mode: x;

The value of x should be any of the following:

CSS Online Test

« Previous Tutorial Next Tutorial »