[ @sdxc/u/animation ]
animation-delay
Applies the animation-delay property.
import { animationDelay } from "@sdxc/u/animation";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.animationDelay("150ms") | css({ animationDelay: "150ms" }) |
u.animationDelay() | css({ animationDelay: "0s" }) |
u.animationDelay(`${index * 60}ms`) | css({ animationDelay: "120ms" }) |
u.animationDelay("-500ms") | css({ animationDelay: "-500ms" }) |
Examples
Basic example
Use animationDelay() with a CSS time, like animationDelay("150ms"), to start an element's animation later and stagger a group:
0ms
150ms
300ms
<div
mix={[
keyframes("bounce", {
"0%, 100%": { translate: "0 0" },
"50%": { translate: "0 -1.5rem" },
}),
...,
]}
>
{["0ms", "150ms", "300ms"].map((delay) => (
<div
mix={[
animationHost("bounce", { duration: "900ms", iterationCount: "infinite" }),
animationDelay(delay),
...,
]}
>
{delay}
</div>
))}
</div>Using negative values
A negative delay, like animationDelay("-500ms"), starts the animation at once, already advanced by that much of its duration:
0s
-250ms
-500ms
<div
mix={[
keyframes("spin", { from: { rotate: "0deg" }, to: { rotate: "360deg" } }),
...,
]}
>
{["0s", "-250ms", "-500ms"].map((delay) => (
<div
mix={[
animationHost("spin", { duration: "2s", easing: "linear", iterationCount: "infinite" }),
animationDelay(delay),
...,
]}
>
{delay}
</div>
))}
</div>Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.animationDelay("150ms"))Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.animationDelay("150ms"))Signature
u.animationDelay(value?: string)