stylex.keyframes

Takes a keyframes definition, creates a @keyframes rule, and returns the keyframe name.

function keyframes(frames: {[key: string]: RawStyles}): string;

You must declare your keyframes in the same file as where you use them. Duplicate declarations will be deduplicated in the generated CSS output.

Example use:

import * as stylex from '@stylexjs/stylex';

const pulse = stylex.keyframes({
  '0%': {transform: 'scale(1)'},
  '50%': {transform: 'scale(1.1)'},
  '100%': {transform: 'scale(1)'},
});

const styles = stylex.create({
  pulse: {
    animationName: pulse,
    animationDuration: '1s',
    animationIterationCount: 'infinite',
  },
});

To declare keyframes in a separate file, you can use defineVars to hold animation names:

animations.stylex.js

import * as stylex from '@stylexjs/stylex';

const pulse = stylex.keyframes({
  '0%': {transform: 'scale(1)'},
  '50%': {transform: 'scale(1.1)'},
  '100%': {transform: 'scale(1)'},
});

const fadeIn = stylex.keyframes({
  '0%': {opacity: 0},
  '100%': {opacity: 1},
});

const fadeOut = stylex.keyframes({
  '0%': {opacity: 1},
  '100%': {opacity: 0},
});

export const animations = stylex.defineVars({
  pulse,
  fadeIn,
  fadeOut,
});

These variables can then be imported and used like any other variables created with defineVars.