Syntax
animation
Applying an animation between styles.
Overview
| Class | Declarations |
|---|---|
animation:`name`|`duration`|`…` | animation: `name` `duration` `…`;
|
animation:fade | animation: var(--animation-fade);
|
animation:ping | animation: var(--animation-ping);
|
animation:flash | animation: var(--animation-flash);
|
animation:heart | animation: var(--animation-heart);
|
animation:jump | animation: var(--animation-jump);
|
animation:pulse | animation: var(--animation-pulse);
|
animation:rotate | animation: var(--animation-rotate);
|
animation:shake | animation: var(--animation-shake);
|
animation:zoom | animation: var(--animation-zoom);
|
animation:float | animation: var(--animation-float);
|
Basic usage
Ping indicator
Use the ping animation to indicate that the shop is open.
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="animation:ping 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="animation:rotate animation-direction:reverse" 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 className="animation:fade animation-delay:-.875s" d="M7.75 7.75l-2.15 -2.15"></path> <path className="animation:fade animation-delay:-.75s" d="M12 6l0 -3"></path> <path className="animation:fade animation-delay:-.625s" d="M16.25 7.75l2.15 -2.15"></path> <path className="animation:fade animation-delay:-.5s" d="M18 12l3 0"></path> <path className="animation:fade animation-delay:-.375s" d="M16.25 16.25l2.15 2.15"></path> <path className="animation:fade animation-delay:-.25s" d="M12 18l0 3"></path> <path className="animation:fade animation-delay:-.125s" d="M7.75 16.25l-2.15 2.15"></path> <path className="animation:fade" d="M6 12l-3 0"></path></svg>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="animation:fade|1s:hover animation:fade|1s@sm animation:fade|1s@dark animation:fade|1s@print">…</div>Customization
Add your animations
Customize managed CSS animations with @theme keyframes.
@theme { @keyframes slide-in-up { from { transform: translateY(100%); } to { transform: translateY(0); } }}Apply the custom animation using animation syntax:
<div class="animation:slide-in-up|slower"></div>