Github

keyframes

Public API


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

keyframes.ts
import { keyframes, style } from '@navita/css';
 
const rotate = keyframes({
  '0%': { transform: 'rotate(0deg)' },
  '100%': { transform: 'rotate(360deg)' }
});
 
const spin = style({
  animationName: rotate,
  animationDuration: '3s'
});
 
// or interpolate as a shorthand:
const spinAgain = style({
  animation: `${rotate} 3s`
});

On This Page