The animation-direction property controls whether the animation runs in reverse on some or all cycles. 


selector { 

    animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;



The animation-direction property takes as its value one of the following keywords:

  • normal; This is the default value. All iterations of the animation run in the order defined by the @keyframes rule.
  • reverse; All iterations run in the reverse order from that one defined in the @keyframes rule.
  • alternate; Counting from 1, all odd cycles (1, 3…) run in the normal direction, and all even ones (2, 4…) in reverse.
  • alternate-reverse; Counting from 1, all odd cycles run in reverse, and all even ones run in the normal direction.
  • initialinherit


The animation-direction property with the alternate value example:


›› go to examples ››