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>

在谷歌浏览器和Edge中，动画似乎有些瑕疵，但在Firefox中，它可以正常运行。

我希望结果如下：

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

任何人都可以看到这会出错吗？我有Codepen预处理带有前缀的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 Example。

CSS动画 - 动画错误？

1 个答案: