Animation Direction

Style syntax for setting the direction of the animation.

Overview [sr-only]

animation-direction:value, / @direction:value,animation-direction: value,
@direction:normalanimation-direction: normal
@direction:reverseanimation-direction: reverse
@direction:altanimation-direction: alternate
@direction:alt-reverseanimation-direction: alternate-reverse
<svg class="@direction:normal @rotate|1s|linear|infinite"></svg>

Simplify the native syntax using the derived symbol.

<div class="animation-direction:reverse">
<div class="@direction:reverse">

Basic usage

Play forward

The animation plays forward in each cycle.

<svg class="@direction:normal @rotate|1s|linear|infinite"></svg>

Play backward

The animation plays backward in each cycle. For example, rotate counterclockwise.

<svg class="@direction:reverse @rotate|1s|linear|infinite"></svg>

Play alternately

The animation reverses direction each cycle and the first iteration plays forward.

<svg class="@direction:alt @rotate|1s|linear|infinite"></svg>

Play alternately and reverse first

The animation reverses direction each cycle and the first iteration plays backward.

<svg class="@direction:alt-reverse @rotate|1s|linear|infinite"></svg>

Fade out

Reverse the @fade animation so that you don't need to define a new keyframe for fade-out.

<svg class="@fade|1s|reverse|infinite"></svg>

For one-shot animations, remove infinite.

Conditionally apply

Apply styles in different states using selectors, media queries, etc.

<div class="@direction:normal:hover"></div>
<div class="@direction:normal@sm"></div>
<div class="@direction:normal@dark"></div>
<div class="@direction:normal@print"></div>
Animation Delay

Style syntax for setting a time to delay before beginning to perform the animation.

Animation Duration

Style syntax for setting the length of time that an animation takes to complete one cycle.

MIT License © Aoyue Design LLC.