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 で作成された他の変数のようにインポートして使用できます。