animation
animation
Emits an @keyframes rule under name together with the host animation-* declarations that reference it.
import { animation } from "@sdxc/u/animation";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.animation("fade-in", {
keyframes: {
from: { opacity: 0 },
to: { opacity: 1 },
},
duration: "150ms",
easing: "ease-out",
}); | css({
"@keyframes fade-in": { from: { opacity: 0 }, to: { opacity: 1 } },
animationName: "fade-in",
animationDuration: "150ms",
animationTimingFunction: "ease-out",
}) |
u.animation("fade-in", {
keyframes: { from: { opacity: 0 }, to: { opacity: 1 } },
duration: "150ms",
delay: "150ms",
}); | css({
"@keyframes fade-in": { from: { opacity: 0 }, to: { opacity: 1 } },
animationName: "fade-in",
animationDuration: "150ms",
animationDelay: "150ms",
}) |
Using a custom value
Every scale argument also takes a raw CSS value, which passes through untouched.
u.animation("fade-in", {
keyframes: {
from: { opacity: 0 },
to: { opacity: 1 },
},
duration: "150ms",
easing: "ease-out",
});Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.animation("fade-in", {
keyframes: {
from: { opacity: 0 },
to: { opacity: 1 },
},
duration: "150ms",
easing: "ease-out",
});)Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.animation("fade-in", {
keyframes: {
from: { opacity: 0 },
to: { opacity: 1 },
},
duration: "150ms",
easing: "ease-out",
});)Signature
u.animation(name: string, config: AnimationConfig)