相同的 CSS 动画没有相同的持续时间（带有动画背景颜色）答案

【问题标题】：The same CSS animations does not have the same durations (with animated background color)相同的 CSS 动画没有相同的持续时间（带有动画背景颜色）
【发布时间】：2017-12-06 20:55:48
【问题描述】：

我尝试用 css 动画制作两个块。它具有相同的transform 动画，但其中之一也具有background-color 动画。此动画拆分为两个@keyframes。

查看代码（https://codepen.io/mctep/pen/Rgyaep）：

<style>
   .a {
      position: absolute;
      left: 0;
      top: 0;
      width: 100px;
      height: 100px;
      background-color: red;
      animation: a 1s infinite;
    }

    .b {
      position: absolute;
      left: 0;
      top: 0;
      width: 100px;
      height: 100px;
      background-color: gray;
      animation: b 1s infinite;
    }

    @keyframes a {
      0% {
        background-color: red;
        transform: translateX(0);
      }

      50% {
        background-color: green;
        transform: translateX(100px);
      }

      100% {
        background: red;
      }
    }

    @keyframes b {
      0% {
        transform: translateX(0);
      }

      50% {
        transform: translateX(100px);
      }
     }
</style>

<div class="a"></div>
<div class="b"></div>

在谷歌浏览器中，彩色块的动画滞后于灰色块。在 Safari 和 FF 中，它完美运行。

我可以为background 制作一个@keyframes，为transform 制作另一个，它可以解决问题。但我想对单个元素使用 animation 属性的单个值。如果没有任何方法可以修复它，我会将 moving 和 coloring 动画分开。

为什么会这样？是谷歌浏览器的错误吗？

【问题讨论】：

变换：translateX100px);不正确，你看到了吗？
@Pv-Viana 谢谢，已修复

标签： css google-chrome animation

【解决方案1】：

无法为您提供为什么会发生这种情况的具体原因，但我们也可以通过在动画 B 中简单地指定 background-color 来消除 Chrome 的困惑。

@keyframes b {
  0% {
    background-color: gray; /* add this */
    transform: translateX(0);
  }
}

.a {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  background-color: red;
  animation: a 1s infinite;
}
.b {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  background-color: gray;
  animation: b 1s infinite;
}
@keyframes a {
  0% {
    background-color: red;
    transform: translateX(0);
  }
  50% {
    background-color: green;
    transform: translateX(100px);
  }
  100% {
    background: red;
  }
}
@keyframes b {
  0% {
    background-color: gray;
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
}

<div class="a"></div>
<div class="b"></div>

【讨论】：