React JSX文件中如何添加支持传入变量的keyframes关键帧样式？

推荐方案：CSS自定义属性（CSS变量）传值 #

这是兼容性最好、性能最高的实现方式，不需要动态修改动画规则，利用CSS原生的变量作用域特性即可实现动态传值：

1. 改造原有CSS代码，在keyframes的100%帧中读取CSS变量，可配置兜底值避免变量未定义时样式异常：

@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-1 * var(--move-x-distance, 0px)));
  }
}

.movement {
  animation: move 20s linear infinite;
}

2. 在React组件中，将动态的size值通过元素内联style绑定为同名CSS变量即可，变量值会随组件状态自动同步：

function MovingCircle() {
   const size = 10; // 该值随页面状态变化时，会自动同步到动画中

   return (
      // 纯数字值注意拼接对应单位，若size本身带单位可直接赋值
      <div 
        className="movement" 
        style={{ '--move-x-distance': `${size}px` }}
      >
        circle
      </div>
   )
}

补充说明 #

• 如果需要size变化时动画从头重新播放，给元素绑定和size关联的key属性即可：<div key={size} ... />，key变更会触发元素重新挂载，动画自动重置
• 支持任意单位的传值，比如size值为百分比、rem单位时，直接按对应格式赋值给CSS变量即可

备选方案（不推荐）：动态注入keyframes样式 #

如果遇到极特殊场景无法使用CSS变量，可以通过useRef动态插入style标签写入带动态值的keyframes规则，该方案需要手动操作DOM，有额外性能开销，仅作兜底参考：

import { useEffect, useRef } from 'react'

function MovingCircle() {
  const size = 10;
  const dynamicStyleRef = useRef(null);

  useEffect(() => {
    // 初始化style标签
    if (!dynamicStyleRef.current) {
      dynamicStyleRef.current = document.createElement('style');
      document.head.appendChild(dynamicStyleRef.current);
    }
    // 写入带当前size值的动画规则
    dynamicStyleRef.current.textContent = `
      @keyframes dynamicMove {
        0% { transform: translateX(0); }
        100% { transform: translateX(-${size}px); }
      }
    `;

    // 组件卸载时清理插入的style标签
    return () => {
      dynamicStyleRef.current?.remove();
    }
  }, [size])

  return (
    <div 
      className="movement" 
      style={{ animationName: 'dynamicMove' }}
    >
      circle
    </div>
  )
}

内容的提问来源于stack exchange，提问作者journalsup