CSS动画-动画bug？

Question

我试图使用CSS动画动画一个立方体旋转，并暂停每一张脸设置时间。

笔在这里

​

@keyframes frontToLeft {
    75% { transform: rotateY(0); }
    100% { transform: rotateY(90deg); }
  }

  @keyframes leftToBack {
    75% { transform: rotateY(90deg); }
    100% { transform: rotateY(180deg); }
  }

  @keyframes backToRight {
    75% { transform: rotateY(180deg); }
    100% { transform: rotateY(270deg); }
  }

  @keyframes rightToFront {
    75% { transform: rotateY(270deg); }
    100% { transform: rotateY(360deg); }
  }

  .cube-container {
    padding-top: 200px;
    perspective: 800px;
    perspective-origin: 50% 100px;
  }

  .qube {
    position: relative;
    width: 200px;
    margin: 0 auto;
    transform-style: preserve-3d;

    animation-name: frontToLeft, leftToBack, backToRight, rightToFront;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-duration: 2s, 2s, 2s, 2s;
    animation-delay: 2s, 4s, 6s, 8s;

   * {
      position: absolute;
      left: 0;
      top: 0;
      margin: 0;
      padding: 0;
      width: 200px;
      height: 200px;
      background: rgba(255,255,255,0.1);
      box-shadow: inset 0 0 30px rgba(125,125,125,0.8);
    }

    .front {
      transform: translateZ(100px);
    }

    .back {
      transform: translateZ(-100px) rotateY(180deg);
    }

    .top {
      transform: rotateX(-90deg) translateY(-100px);
      transform-origin: top center;
    }

    .bottom {
      transform: rotateX(90deg) translateY(100px);
      transform-origin: bottom center;
    }

    .left {
      transform: rotateY(270deg) translateX(-100px);
      transform-origin: center left;
    }

    .right {
      transform: rotateY(-270deg) translateX(100px);
      transform-origin: top right;
    }
  }

<div class="cube-container">
  <div class="qube">
    <div class="front">front</div>
    <div class="left">left</div>
    <div class="back">back</div>
    <div class="right">right</div>
    <div class="top">top</div>
    <div class="bottom">bottom</div>
  </div>
</div>   

​

在Google和Edge中，动画似乎出现了故障，但在Firefox中，它的工作原理是正常的。

我希望结果是：

• 正面-暂停2秒，旋转2秒
• 左脸-暂停2秒，旋转2秒
• 后脸-暂停2秒，旋转2秒
• 右面-暂停2秒，旋转2秒

有人能看出这会是怎么回事吗？我有代码预处理SCSS的前缀。

提前感谢！

Answer 1

据我所知，对此进行测试，它看起来像是一个bug。我尝试过的任何东西似乎都不能纠正动画。正如您所说的，Firefox的工作方式与预期的一样。

我所能想到的是一个潜在的解决方案，就是将它组合成一个动画，如下所示：

@keyframes spinCube {
    20% { transform: rotateY(0deg); }
    25% { transform: rotateY(90deg); }
    45% { transform: rotateY(90deg); }
    50% { transform: rotateY(180deg); }
    70% { transform: rotateY(180deg); }
    75% { transform: rotateY(270deg); }
    95% { transform: rotateY(270deg); }
    100% { transform: rotateY(360deg); }
}

.qube {
animation: spinCube 8s 1 forwards;
}

这将需要一些调整，以使时间正确，但这是我唯一能想到的事情。

这里是这个替代解决方案的CodePen实例。