Syntax

Animation Direction

Setting the direction of the animation.

Overview

ClassDeclarations
@direction:value,animation-direction: value,;
@direction:normalanimation-direction: normal;
@direction:reverseanimation-direction: reverse;
@direction:altanimation-direction: alternate;
@direction:alt-reverseanimation-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: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 applying conditionally.

<div class="@direction:normal:hover"></div>
<div class="@direction:normal@sm"></div>
<div class="@direction:normal@dark"></div>
<div class="@direction:normal@print"></div>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.