Create CSS keyframe animations with theme tokens

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

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

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

const slideUp = keyframes({
  from: {
    opacity: 0,
    transform: "translateY($medium)",
  },
  to: {
    opacity: 1,
    transform: "translateY(0)",
  },
});
Copy