keyframes

Create CSS keyframe animations with theme tokens

Usage

import { keyframes, css } from "./theme";

const fadeIn = keyframes({
  from: {
    opacity: 0,
  },
  to: {
    opacity: 1,
  },
});

const animatedClass = css({
  animation: `${fadeIn} 0.5s ease-out`,
});
Copy

With Theme Tokens

Theme tokens work directly in keyframes and are resolved to CSS variables:

const slideUp = keyframes({
  from: {
    opacity: 0,
    transform: "translateY($medium)",  // Token in transform function
    backgroundColor: "$primary",        // Token resolves to var(--stoop-colors-primary)
  },
  to: {
    opacity: 1,
    transform: "translateY(0)",
    backgroundColor: "$secondary",     // Token resolves to var(--stoop-colors-secondary)
  },
});
Copy

How it works:

• Tokens in keyframes are resolved using the same property-aware resolution as regular styles
• $medium in transform: "translateY($medium)" maps to space scale (property-aware)
• $primary maps to colors scale (property-aware)
• Tokens in complex expressions (like translateY()) are replaced using regex
• All tokens resolve to CSS variables: var(--stoop-space-medium), var(--stoop-colors-primary)

Example with multiple tokens:

const fadeAndSlide = keyframes({
  "0%": {
    opacity: 0,
    transform: "translateY($large)",
    backgroundColor: "$background",
  },
  "50%": {
    opacity: "$opacities.hover",
    transform: "translateY($medium)",
  },
  "100%": {
    opacity: 1,
    transform: "translateY(0)",
    backgroundColor: "$primary",
  },
});
Copy