Animation Direction

Setting the direction of the animation.

Overview

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 based on different states using selectors and conditional queries.

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