keyframes

Creates a locally scoped animation name for the defined @keyframes.

animation.css.ts
import { keyframes, style } from '@vanilla-extract/css';

const rotate = keyframes({
  '0%': { transform: 'rotate(0deg)' },
  '100%': { transform: 'rotate(360deg)' }
});

export const spin = style({
  animationName: rotate,
  animationDuration: '3s'
});

// or interpolate as a shorthand:
export const spinAgain = style({
  animation: `${rotate} 3s`
});
CSS
@keyframes animation_rotate__jxjrfl0 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.animation_spin__jxjrfl1 {
  animation-name: animation_rotate__jxjrfl0;
  animation-duration: 3s;
}
.animation_spinAgain__jxjrfl2 {
  animation: animation_rotate__jxjrfl0 3s;
}