Function keyframes

keyframes(frames: Record<string, CSSInterpolation>): string

Creates a CSS keyframes animation.

Can be applied to an element using a CSS animation property.

Parameters

frames: Record<string, CSSInterpolation>

Returns string

See

Example: Apply animation to element

const scale = keyframes({
  'from, to': { transform: 'scale(1)' },
  '50%': { transform: 'scale(1.02)' },
});

const pulse = className({ animation: `${scale} 1s ease infinite` })

function MyComponent() {
  return (
    <div className={pulse}>Pulsing</div>
  );
}