The animation-fill-mode property controls what styles will be applied to the element when automation cycle ends or is paused. The CSS usually does not affect the animated element until the first keyframe is started, and after the last keyframe was played. The automation-fill-mode property overrides this element.


selector { 

    animation-fill-mode: none | forwards | backwards | both | initial | inherit;



Following values are allowed for the animation-fill-mode property:

  • none; The animation does not apply any styles before or after the execution. This is the default state.
  • forwards; The CSS applies element’s styling property values once the animation ends (defined by the animation-iteration-count).
  • backwards; The CSS applies element’s styling property values as defined by the keyframe and during the period defined by the animation-delay. The keyframe definition on the other hand depends on the animation-direction.
  • both; The CSS will follow the rules of both values, forwards and backward. 
  • initialinherit


The animation-fill-mode property with none, forwards, backwards and both values example:


›› go to examples ››