Animation direction property (animation-direction)

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

Syntax:

selector { 

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

}

Values:

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.
• initial, inherit

Example

The animation-direction property with the alternate value example:

 

›› go to examples ››