跳到主要内容

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.