The animation-fill-mode property in CSS specifies how the styles of an animation should be applied before and after its execution. It controls whether the animation's styles should be applied to the element when the animation is not playing, such as before it starts or after it ends. This property is useful for maintaining the final state of the animation or for ensuring that the animation's effects are visible at specific times.

Syntax

element { animation-fill-mode: mode; }
  • mode: Defines how the animation's styles are applied. It can be one of the following values:
    • none
    • forwards
    • backwards
    • both

Values

  1. none:

    • The default value. The animation will not apply any styles before it starts or after it ends. The element will revert to its original state before and after the animation.
    animation-fill-mode: none;
  2. forwards:

    • The animation's final keyframe styles will be applied after the animation ends. The element retains the styles from the last keyframe after the animation has completed.
    animation-fill-mode: forwards;
  3. backwards:

    • The animation's initial keyframe styles will be applied before the animation starts. The element retains the styles from the first keyframe while the animation is waiting to start.
    animation-fill-mode: backwards;
  4. both:

    • The element will apply the styles from the first keyframe before the animation starts and the styles from the last keyframe after the animation ends. This value combines backwards and forwards.
    animation-fill-mode: both;

Example

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Animation Fill Mode Example</title> <style> @keyframes slideIn { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .box-none { width: 100px; height: 100px; background-color: red; animation-name: slideIn; animation-duration: 2s; animation-fill-mode: none; } .box-forwards { width: 100px; height: 100px; background-color: green; animation-name: slideIn; animation-duration: 2s; animation-fill-mode: forwards; } .box-backwards { width: 100px; height: 100px; background-color: blue; animation-name: slideIn; animation-duration: 2s; animation-fill-mode: backwards; } .box-both { width: 100px; height: 100px; background-color: orange; animation-name: slideIn; animation-duration: 2s; animation-fill-mode: both; } </style> </head> <body> <div class="box-none"></div> <div class="box-forwards"></div> <div class="box-backwards"></div> <div class="box-both"></div> </body> </html>

Explanation:

  • @keyframes slideIn:

    • Defines an animation that moves the element from left to right and fades it in.
  • .box-none:

    • The animation-fill-mode is set to none, so the element will not retain any styles before or after the animation. It will not show the final state of the animation when it ends.
  • .box-forwards:

    • The animation-fill-mode is set to forwards, so the element retains the styles from the last keyframe after the animation ends.
  • .box-backwards:

    • The animation-fill-mode is set to backwards, so the element applies the styles from the first keyframe before the animation starts.
  • .box-both:

    • The animation-fill-mode is set to both, so the element retains styles from both the first and last keyframes, applying them before and after the animation.

Important Points

  1. Default Value:

    • The default value is none, meaning the element will not retain any animation styles outside of the animation duration.
  2. Combining with Animation Duration:

    • The animation-fill-mode property works alongside animation-duration. For instance, if animation-duration is set to 2s and animation-fill-mode is set to forwards, the element will retain the styles from the final keyframe after the 2-second animation ends.
  3. Practical Use Cases:

    • forwards is useful when you want the element to remain in its final state after the animation ends.
    • backwards is useful for ensuring the element shows its initial state even before the animation starts.
    • both is helpful when you want to apply styles before and after the animation.