Motion
animation-direction
Setting the direction of the animation.
Overview
| Class | Declarations |
|---|---|
animation-direction:normal | animation-direction: normal;
|
animation-direction:reverse | animation-direction: reverse;
|
animation-direction:alternate | animation-direction: alternate;
|
animation-direction:alternate-reverse | animation-direction: alternate-reverse;
|
animation-direction:<value>,<…> | animation-direction: <value>,<…>;
|
Use the native animation direction property directly.
<div class="animation-direction:reverse">Basic usage
Play forward
The animation plays forward in each cycle.
<svg class="animation-direction:normal animation:rotate|1s|linear|infinite">…</svg>Play backward
The animation plays backward in each cycle. For example, rotate counterclockwise.
<svg class="animation-direction:reverse animation:rotate|1s|linear|infinite">…</svg>Play alternately
The animation reverses direction each cycle and the first iteration plays forward.
<svg class="animation-direction:alternate animation:rotate|1s|linear|infinite">…</svg>Play alternately and reverse first
The animation reverses direction each cycle and the first iteration plays backward.
<svg class="animation-direction:alternate-reverse animation:rotate|1s|linear|infinite">…</svg>Fade out
Reverse a project-defined fade keyframe so that you don't need to define a new keyframe for fade-out.
<svg class="animation-name:fade animation-duration:1s animation-direction:reverse animation-iteration-count:infinite">…</svg>For one-shot animations, remove infinite.
Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="animation-direction:normal:hover">…</div><div class="animation-direction:normal@sm">…</div><div class="animation-direction:normal@dark">…</div><div class="animation-direction:normal@print">…</div>