Syntax
animation-direction
Setting the direction of the animation.
Overview
| Class | Declarations |
|---|---|
@direction:`value`,`…` | animation-direction: `value`,`…`;
|
@direction:normal | animation-direction: normal;
|
@direction:reverse | animation-direction: reverse;
|
@direction:alternate | animation-direction: alternate;
|
@direction:alternate-reverse | animation-direction: alternate-reverse;
|
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:alternate @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:alternate-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.
Apply conditionally
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>