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:

forwards - used to retain to the style set by the last keyframe
backwards - used to get and retain to the style set by the first keyframe
both - used to use both forwards and backwards. The style of first keyframe will get apply to the element, before the animation starts, and retain the style of last keyframe, after the end of animation
none - used not to apply any style before/after animation. This is the default value
initial - used to use the default value
inherit - used to use the value inherited by the parent element

CSS Online Test

« Previous Tutorial Next Tutorial »