Syntax

Animation

Applying an animation between styles.

Overview

ClassDeclarations
@name|duration|animation: name duration ;
@fade|1s|infiniteanimation: fade 1s infinite;
@fade|1s|infinite|reverseanimation: fade 1s infinite reverse;
@ping|1s|infiniteanimation: ping 1s infinite;
@flash|1s|infiniteanimation: flash 1s infinite;
@heart|1s|infiniteanimation: heart 1s infinite;
@jump|1s|infiniteanimation: jump 1s infinite;
@pulse|1s|infiniteanimation: pulse 1s infinite;
@rotate|1s|infinite|linearanimation: rotate 1s infinite linear;
@rotate|1s|infinite|linear|reverseanimation: rotate 1s infinite linear reverse;
@shake|1s|infiniteanimation: shake 1s infinite;
@zoom|1s|infiniteanimation: zoom 1s infinite;
@float|3s|ease-in-out|infiniteanimation: float 3s ease-in-out infinite;

Basic usage

Ping indicator

Use the ping animation to indicate that the shop is open.

vegetable salad in bowls
Open
Master Food
<svg class="inline-block fill:green-40 size:2x overflow:visible" viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg">
<circle class="@ping|1s|infinite transform:center" cx="4" cy="4" r="4" />
<circle cx="4" cy="4" r="4" />
</svg>

Rotate indicator

Use the counterclockwise rotate animation to indicate that data is being restored.

Restoring ...
<svg class="@rotate|1s|linear|reverse|infinite" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M15 4.55a8 8 0 0 0 -6 14.9m0 -4.45v5h-5"></path>
<path d="M18.37 7.16l0 .01"></path>
<path d="M13 19.94l0 .01"></path>
<path d="M16.84 18.37l0 .01"></path>
<path d="M19.37 15.1l0 .01"></path>
<path d="M19.94 11l0 .01"></path>
</svg>

Advanced usage

Loading spinner

Use the fade animation on SVG paths with regular delays to create a loading spinner.

Loading ...
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path class="@fade|1s|ease-out|reverse|infinite|0s" d="M7.75 7.75l-2.15 -2.15"></path>
<path class="@fade|1s|ease-out|reverse|infinite|.125s" d="M12 6l0 -3"></path>
<path class="@fade|1s|ease-out|reverse|infinite|.25s" d="M16.25 7.75l2.15 -2.15"></path>
<path class="@fade|1s|ease-out|reverse|infinite|.375s" d="M18 12l3 0"></path>
<path class="@fade|1s|ease-out|reverse|infinite|.5s" d="M16.25 16.25l2.15 2.15"></path>
<path class="@fade|1s|ease-out|reverse|infinite|.625s" d="M12 18l0 3"></path>
<path class="@fade|1s|ease-out|reverse|infinite|.75s" d="M7.75 16.25l-2.15 2.15"></path>
<path class="@fade|1s|ease-out|reverse|infinite|.875s" d="M6 12l-3 0"></path>
</svg>

Conditionally apply

Apply styles based on different states using selectors and applying conditionally.

<div class="@fade|1s:hover @fade|1s@sm @fade|1s@dark @fade|1s@print"></div>

Based on motion preferences

Use @motion or @reduced-motion to style an element based on user-specific motion preferences.

<svg class="@fade|.5s@motion"></svg>

Customization

Extend your animations

Customize your CSS animations using the animations configuration.

export default {
animations: {
'slide-in-up': {
from: {
transform: 'translateY(100%)'
},
to: {
transform: 'translateY(0)'
}
}
}
}

Apply the custom animation using animation syntax:

<div class="@slide-in-up|.5s"></div>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.