animation

animationHost

Emits the host animation-* declarations alone, taking every AnimationConfig key but keyframes.

import { animationHost } from "@sdxc/u/animation";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`<div mix={[ u.keyframes("ui-spin-rotate", { from: { transform: "rotate(0deg)" }, to: { transform: "rotate(360deg)" } }), u.when("&[data-busy]", u.animationHost("ui-spin-rotate", { duration: "1s", iterationCount: "infinite" })), ]} />`	`css({ "@keyframes ui-spin-rotate": { from: { transform: "rotate(0deg)" }, to: { transform: "rotate(360deg)" } }, "&[data-busy]": { animationName: "ui-spin-rotate", animationDuration: "1s", animationIterationCount: "infinite" }, })`

Using a custom value

Every scale argument also takes a raw CSS value, which passes through untouched.

<div
  mix={[
    u.keyframes("ui-spin-rotate", { from: { transform: "rotate(0deg)" }, to: { transform: "rotate(360deg)" } }),
    u.when("&[data-busy]", u.animationHost("ui-spin-rotate", { duration: "1s", iterationCount: "infinite" })),
  ]}
/>

Applying on a state

Wrap the call in a state utility to scope it to one selector.

u.hover(<div
  mix={[
    u.keyframes("ui-spin-rotate", { from: { transform: "rotate(0deg)" }, to: { transform: "rotate(360deg)" } }),
    u.when("&[data-busy]", u.animationHost("ui-spin-rotate", { duration: "1s", iterationCount: "infinite" })),
  ]}
/>)

Responsive design

Wrap the call in a container query to scope it to one width.

u.at("md", <div
  mix={[
    u.keyframes("ui-spin-rotate", { from: { transform: "rotate(0deg)" }, to: { transform: "rotate(360deg)" } }),
    u.when("&[data-busy]", u.animationHost("ui-spin-rotate", { duration: "1s", iterationCount: "infinite" })),
  ]}
/>)

Signature

u.animationHost(name: string, config: Omit<AnimationConfig, "keyframes">)