Back to Vanilla Extract

globalKeyframes

site/docs/global-api/global-keyframes.md

latest384 B
Original Source

globalKeyframes

Creates a globally scoped set of keyframes.

ts
// animation.css.ts

import {
  globalKeyframes,
  style
} from '@vanilla-extract/css';

const rotate = 'globalRotate';

globalKeyframes(rotate, {
  '0%': { transform: 'rotate(0deg)' },
  '100%': { transform: 'rotate(360deg)' }
});

export const spin = style({
  animation: `3s infinite ${rotate}`
});