Animation Fill Mode

Published: November 20, 2017By brooklynwriters
  • Animation Name
  • Animation Duration
  • Animation Timing Function
  • Animation Delay
  • Animation Iteration Count
  • Animation Direction
  • Animation Fill Mode
  • Animation Play State
  • Animation Event
  • Animation Event Target

Specifies if the animation styles should precede execution during the delay period (backwards) or remain after completion (forwards).

Value Description
noneDefault. The animation will not apply any styles to the element when it's not executing.
forwardsThe CSS styles specified in the LAST keyframe will apply to the element AFTER the animation finishes.
backwardsThe CSS styles specified in the FIRST keyframe will apply to the element during the DELAY PERIOD before the animation starts. Note, the LAST keyframe will be used instead of the first if animation-direction is set to 'reverse' or 'alternate-reverse'.
bothThe animation will follow the rules for both forwards and backwards, thus extending the animation properties in both directions.

Themeover CSS Reference

Close