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 chain multiple keyframes, provide comma-separated values to animation properties:

const expand = stylex.keyframes({
  from: { maxHeight: '0px' },
  to: { maxHeight: '1000px' },
});

const fadeIn = stylex.keyframes({
  from: { opacity: 0 },
  to: { opacity: 1 },
});

const styles = stylex.create({
  open: {
    animationName: `${fadeIn}, ${expand}`,
    animationDuration: '1s, 1s',
  },
});

To use keyframes return values 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.