css - 相同的 CSS 动画没有相同的持续时间(动画背景颜色)

Question

我尝试使用 CSS 动画为两个 block 设置动画。它具有相同的 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>

在 Google Chrome 中，彩色 block 的动画滞后于灰色 block 。在 Safary 和 FF 中它完美地工作。

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

为什么会这样？是 Google Chrome 的错误吗？

Answer 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>