Chrome 90中DNA动画translate属性兼容问题求助

问题根源 #

你遇到的问题是因为 Chrome 90 不支持独立的 translate CSS 属性，替换为 transform: translate() 后，又与另一个修改 transform 属性的 size 动画产生冲突——两个动画同时操作同一个属性，导致其中一个效果被覆盖。

解决方案 #

使用 CSS 变量分别控制位移和缩放，将两者合并到同一个 transform 属性中，避免属性冲突。具体调整如下：

1. 新增 CSS 变量 --x（控制水平位移）和 --scale（控制缩放）
2. 在 .ball 类中使用合并的 transform: translate(var(--x), var(--y)) scale(var(--scale))
3. 修改 location 动画仅更新 --x 变量，不再直接修改 transform
4. 修改 size 动画仅更新 --scale 变量，不再直接修改 transform

修改后的完整代码 #

<!DOCTYPE html>
<html>
  <head>
    <style>
      #container {
        position: absolute;
        top: calc(50vh - 100px);
        left: calc(50vw - 100px);
        height: 200px;
        width: 200px;
        background-color: white;
        border-radius: 10px;
      }
      .ball {
        transform-origin: center;
        width: 5%;
        height: 5%;
        margin-top: 0.8%;
        border-radius: 100%;
        animation: location 1.5s cubic-bezier(0.48, 0, 0.59, 0.99) 0s infinite
            alternate,
          size 3s linear infinite;
        --y: 0px;
        --x: 400%;
        --scale: 1;
        transform: translate(var(--x), var(--y)) scale(var(--scale));
      }
      .animateBackward {
        animation-direction: alternate-reverse, reverse;
        --y: 115%;
      }
      .line {
        width: 10%;
        height: 1.3%;
        margin-top: -3%;
        margin-left: 45%;
        animation: lineSpin calc(3s / 4) cubic-bezier(0.48, 0, 0.59, 0.99) alternate infinite;
      }

      @keyframes location {
        0% {
          --x: 400%;
        }

        100% {
          --x: 1500%;
        }
      }

      @keyframes size {
        0% {
          --scale: 1;
        }
        25% {
          --scale: 1.5;
        }
        50% {
          --scale: 1;
        }
        75% {
          --scale: 0.5;
        }
        100% {
          --scale: 1;
        }
      }

      @keyframes lineSpin {
        0% {
          transform: scaleX(5.6);
        }
        100% {
          transform: scaleX(0);
        }
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
  <script>
    const redJump = 2.5;
    const greenJump = 3;
    const blueJump = -11;
    const container = document.getElementById('container');
    [...Array(15)].forEach((_, i) => {
      const color = `rgb(${65 + redJump * i}, ${184 + greenJump * i}, ${
        212 + blueJump * i
      })`;
      container.innerHTML += `
      <div class="ball" style="animation-delay: -${
        250 * i
      }ms; background-color: ${color}"></div>
      ${
        i > 0
          ? `<div class="line" style="animation-delay: -${
              250 * i
            }ms; background-color: ${color}"></div>`
          : ''
      }
      <div class="ball animateBackward" style="animation-delay: -${
        250 * (i + 1)
      }ms; background-color: ${color}"></div>`;
    });
  </script>
</html>

说明 #

• CSS 变量 --x 由 location 动画驱动，控制小球的水平位移
• CSS 变量 --scale 由 size 动画驱动，控制小球的缩放效果
• 合并后的 transform 属性同时应用位移和缩放，彻底解决了属性冲突问题
• 该方案兼容 Chrome 90 及以上版本，因为 CSS 变量和 transform 的基础用法在这些版本中均受支持

内容的提问来源于stack exchange，提问作者Tom Ben Aroya