stylex.keyframes

接收一个关键帧定义，创建一个 @keyframes 规则，并返回关键帧名称。

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

您必须在使用关键帧的同一文件中声明它们。重复声明将在生成的 CSS 输出中进行去重。

使用示例：

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',
  },
});

要在单独的文件中声明关键帧，可以使用 defineVars 来保存动画名称

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,
});

然后可以导入这些变量，并像使用 defineVars 创建的其他任何变量一样使用它们。