Motion
animation
Applying an animation between styles.
Overview
| Class | Declarations |
|---|---|
animate:fade | animation: var(--animate-fade);
|
animate:ping | animation: var(--animate-ping);
|
animate:flash | animation: var(--animate-flash);
|
animate:heart | animation: var(--animate-heart);
|
animate:jump | animation: var(--animate-jump);
|
animate:pulse | animation: var(--animate-pulse);
|
animate:rotate | animation: var(--animate-rotate);
|
animate:shake | animation: var(--animate-shake);
|
animate:zoom | animation: var(--animate-zoom);
|
animate:float | animation: var(--animate-float);
|
animate:<name> | animation: <name>;
|
animation:<name>|<duration>|<…> | animation: <name> <duration> <…>;
|
Basic usage
Use animate:* to apply a named animation token from the animate namespace. Use the native animation:* shorthand when you want to write the keyframe name, duration, easing, fill mode, and other animation parts together.
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="animate:ping transform-origin: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="animate: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="animate:fade animation-delay:-.875s" d="M7.75 7.75l-2.15 -2.15"></path> <path className="animate:fade animation-delay:-.75s" d="M12 6l0 -3"></path> <path className="animate:fade animation-delay:-.625s" d="M16.25 7.75l2.15 -2.15"></path> <path className="animate:fade animation-delay:-.5s" d="M18 12l3 0"></path> <path className="animate:fade animation-delay:-.375s" d="M16.25 16.25l2.15 2.15"></path> <path className="animate:fade animation-delay:-.25s" d="M12 18l0 3"></path> <path className="animate:fade animation-delay:-.125s" d="M7.75 16.25l-2.15 2.15"></path> <path className="animate:fade" d="M6 12l-3 0"></path></svg>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="animate:fade:hover animate:fade@sm animate:fade@dark animate:fade@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>