Skip to content
Transforms and animation

animation-direction

Controls the direction in which keyframes play on each animation cycle.

58 effects in the catalog use this property.

Syntax

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

Watch out

With `alternate`, one cycle goes forward and the next goes backward, so a full out-and-back rhythm takes twice the declared duration.

Common values

alternate
Plays forward then backward, useful for pulses and oscillation
reverse
Plays keyframes in reverse

Effects using animation-direction

These are working effects from the catalog. Open a tile to inspect the full source.