CSS动画：动态修改关键帧背景色的实现方案咨询

不是只能通过JavaScript访问样式表来实现，CSS变量（var()）是更灵活且易维护的解决方案，尤其适合多元素独立控制的场景。

基础实现步骤 #

首先修改你的关键帧代码，把固定颜色替换为自定义CSS变量：

@keyframes flip {
  0% {
    transform: rotateX(0);
  }

  50% {
    transform: rotateX(90deg);
    background-color: var(--flip-bg-color);
  }

  100% {
    transform: rotateX(0);
  }
}

然后通过JavaScript给目标元素设置这个变量的值，值由你的自定义函数返回：

// 假设目标元素是单个元素
const targetElement = document.querySelector('.flip-element');
const dynamicColor = getColorFromFunction(); // 你的自定义颜色函数
targetElement.style.setProperty('--flip-bg-color', dynamicColor);

多元素独立控制的处理 #

针对你补充的三个相邻元素、各自用独立函数取色的场景，CSS变量的优势就体现出来了——每个元素可以拥有独立的变量值，互不干扰：

1. 给三个元素统一加一个类（比如.flip-item）
2. 通过JavaScript遍历每个元素，分别调用对应的函数获取颜色并设置变量：

const flipItems = document.querySelectorAll('.flip-item');
flipItems.forEach((item, index) => {
  // 根据元素索引或其他标识调用独立的颜色函数
  let itemColor;
  switch(index) {
    case 0:
      itemColor = getColorForFirstItem();
      break;
    case 1:
      itemColor = getColorForSecondItem();
      break;
    case 2:
      itemColor = getColorForThirdItem();
      break;
  }
  item.style.setProperty('--flip-bg-color', itemColor);
});

这样每个元素在动画50%关键帧时，都会使用自己对应的函数返回的背景色，动画流畅度不受影响。

对比直接操作样式表的方式 #

直接修改样式表的关键帧规则虽然可行，但需要定位到对应的@keyframes规则进行修改，当有多个元素需要不同颜色时，要么得创建多个命名不同的关键帧（比如flip-1、flip-2），要么修改全局规则导致所有元素颜色统一，灵活性远不如CSS变量方案。

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