animation

keyframes

Emits an @keyframes rule under name at the top level, where the serializer reads stop keys (from, to, 50%) as stop selectors.

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

Examples

Calls that compose other mixins rather than emitting declarations of their own.

<div
  mix={[
    u.keyframes("fade-in", {
      from: { opacity: 0 },
      to: { opacity: 1 },
    }),
    css({
      animationName: "fade-in",
      animationDuration: "150ms",
    }),
  ]}
/>

// Equivalent at the top level of a `css()` call.
css({ "@keyframes fade-in": { from: { opacity: 0 }, to: { opacity: 1 } } })

Using a custom value

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

<div
  mix={[
    u.keyframes("fade-in", {
      from: { opacity: 0 },
      to: { opacity: 1 },
    }),
    css({
      animationName: "fade-in",
      animationDuration: "150ms",
    }),
  ]}
/>

Applying on a state

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

u.hover(<div
  mix={[
    u.keyframes("fade-in", {
      from: { opacity: 0 },
      to: { opacity: 1 },
    }),
    css({
      animationName: "fade-in",
      animationDuration: "150ms",
    }),
  ]}
/>)

Responsive design

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

u.at("md", <div
  mix={[
    u.keyframes("fade-in", {
      from: { opacity: 0 },
      to: { opacity: 1 },
    }),
    css({
      animationName: "fade-in",
      animationDuration: "150ms",
    }),
  ]}
/>)

Signature

u.keyframes(name: string, frames: Record<string, CSSStyles>)