CSS - animation-fill-mode Property

Quiz

The CSS property animation-fill-mode determines how styles should be applied to the target of a CSS animation, both before and after its execution.

Setting all of the animation settings at once with the shorthand property animation is often convenient.

Possible Values

The CSS property animation-fill-mode can have one of the following values:

none - When the animation is not performing, it won't apply any styles to the target. Instead, the element will be shown according to any other CSS rules that are in place. This behavior represents the default setting.

forwards - The calculated values set by the final keyframe detected during execution will remain on the target. The values of animation-direction and animation-iteration-count determine the final keyframe:

animation-direction	animation-iteration-count	last keyframe encountered
normal	even or odd	100% or to
reverse	even or odd	0% or from
alternate	even	0% or from
alternate	odd	100% or to
alternate-reverse	even	100% or to
alternate-reverse	odd	0% or from

backwards - As soon as the animation is applied to the target, it will apply the values specified in the first appropriate keyframe and keep holding them for the duration of the animation delay. The animation-direction value determines the first appropriate keyframe:

animation-direction	first relevant keyframe
normal or alternate	0% or from
reverse or alternate-reverse	100% or to

both - The animation will adhere to rules in both the forward and backward directions, effectively expanding the animation properties in both directions.

Note: When multiple comma-separated values on an animation-* property is specified, the values are applied to the animations in the order in which the animation-names appear.

Syntax

animation-fill-mode = <single-animation-fill-mode># 

<single-animation-fill-mode> = none | forwards | backwards | both;

Applies To

All the HTML elements, ::before and ::after pseudo-elements.

CSS animation-fill-mode - backwards Value

The following example demonstrates animation-fill-mode.

In the CSS example given, the animation-fill-mode property is set to backwards.
When the .animation-demo element is hovered over, the grow animation is triggered.
It enlarges the circle over 1 second. The animation-fill-mode: backwards property ensures that the element retains its initial state before the animation starts when the hover state is ended.

<html>
<head>
<style>
   .animation-demo {
      width: 200px;
      height: 200px;
      margin-left: 150px;
      margin-top: 150px;
      background-color: #2799db;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-size: 20px;
      transition: all 1s ease;
   }
   @keyframes grow {
      0% {
      transform: scale(1);
      }
      100% {
      transform: scale(1.5);
      }
   }
   .animation-demo:hover {
      animation-name: grow;
      animation-duration: 1s;
      animation-fill-mode: backwards;
   }
</style>
</head>
<body>
<div class="animation-demo">Hover over this!</div>
</body>
</html>

CSS animation-fill-mode - forwards Value

The following example demonstrates animation-fill-mode.

In this example, animation-fill-mode: forwards; is applied to the initial animation to ensure that the element retains its final state (fully visible) after the animation is complete.
When the mouse pointer is hovered over the element, the animation reverses due to a separate animation assigned when hovering with animation-fill-mode: forwards;, maintaining the final state so that the element remains in its final position even after the hover animation has finished.
This property retains the visual state of the element, either after the animation or after hover animation, keeping things looking the same without going back to how they were before.

<html>
<head>
<style>
   @keyframes slidein {
      from {
            margin-left: 100%;
            width: 300%;
      }
      to {
            margin-left: 0%;
            width: 100%;
      }
      } 
      @keyframes slideback {
      from {
            margin-left: 0%;
            width: 100%;
      }
      to {
            margin-left: 100%;
            width: 300%;
      }
   }
   div {
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
      animation-name: slidein;
      animation-duration: 6s;
      animation-fill-mode: forwards;
      font-size: 20px;
      color: white;
   }
   div:hover {
      animation-name: slideback;
      animation-duration: 6s;
      animation-fill-mode: forwards;
   }
</style>
</head>
<body>
<div>Hover Over This!</div>
</body>
</html>

Print Page