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

Posted 2023-03-06

【中文标题】相同的 CSS 动画没有相同的持续时间（带有动画背景颜色）

【英文标题】：The same CSS animations does not have the same durations (with animated background color)

【发布时间】：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 谢谢，已修复

【参考方案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>