css - 如何在最后一帧停止动画

Question

我试图在三个方向上旋转一个立方体。我需要在第 3 个框停止动画，但它回到了原始位置。从第三个盒子有一个动画回到我不想要的第一个盒子。动画应该在第三个盒子停止。给出一些解决方案。

#spinner div {
  position: absolute;
  width: 120px;
  height: 120px;
  border: 1px solid #ccc;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
  text-align: center;
  line-height: 120px;
  font-size: 100px;
}
#spinner .face1 {
  -webkit-transform: translateZ(60px);
}
#spinner .face2 {
  -webkit-transform: rotateY(90deg) translateZ(60px);
}
#spinner .face3 {
  -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
}
@-webkit-keyframes spincube {
  from, to {} 16% {
    -webkit-transform: rotateY(-90deg);
  }
  33% {
    -webkit-transform: rotateY(-90deg) rotateZ(90deg);
  }
}
#spinner {
  -webkit-animation-name: spincube;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-duration: 8s;
  -webkit-transform-style: preserve-3d;
  -webkit-transform-origin: 60px 60px 0;
}

<div id="stage" style="width: 1200px; height: 300px;">
  <div id="spinner">
    <div class="face1">1</div>
    <div class="face2">2</div>
    <div class="face3">3</div>
  </div>
</div>

Answer 1

尽管您已将 animation-fill-mode 设置为 forwards(-webkit 前缀应该不是问题，因为您正在尝试在 Chrome 上)，动画不会在第 3 个框停止，因为您的 to 设置(最后一个关键帧)正在将其恢复到其原始状态(显示框 1)。要解决此问题，您可以使最后一个 keyframe 也保持与 33% 相同的位置(即显示框 3)。

 #spinner div {
   position: absolute;
   width: 120px;
   height: 120px;
   border: 1px solid #ccc;
   background: rgba(255, 255, 255, 0.8);
   box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
   text-align: center;
   line-height: 120px;
   font-size: 100px;
 }
 #spinner .face1 {
   -webkit-transform: translateZ(60px);
 }
 #spinner .face2 {
   -webkit-transform: rotateY(90deg) translateZ(60px);
 }
 #spinner .face3 {
   -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
 }
 @-webkit-keyframes spincube {
   from {} 
   16% {
     -webkit-transform: rotateY(-90deg);
   }
   33% {
     -webkit-transform: rotateY(-90deg) rotateZ(90deg);
   }
   to {
     -webkit-transform: rotateY(-90deg) rotateZ(90deg);
   }
 }
 #spinner {
   -webkit-animation-name: spincube;
   -webkit-animation-timing-function: ease-in-out;
   -webkit-animation-iteration-count: 1;
   -webkit-animation-fill-mode: forwards;
   -webkit-animation-duration: 8s;
   -webkit-transform-style: preserve-3d;
   -webkit-transform-origin: 60px 60px 0;
 }

<div id="stage" style="width: 1200px; height: 300px;">
  <div id="spinner">
    <div class="face1">1</div>
    <div class="face2">2</div>
    <div class="face3">3</di>
  </div>
</div>

---

或者，您也可以像下面这样更改您的关键帧设置。请注意，我将持续时间减少了三分之一，因为我们将关键帧更改了 3 倍。

 @-webkit-keyframes spincube {
     from {
     }
     48% { /* factor of 3 since we are changing 33% to 100% or to */
         -webkit-transform: rotateY(-90deg);
     }
     to { /* make the last keyframe show the box 3 */
         -webkit-transform: rotateY(-90deg) rotateZ(90deg);
     }
 }
 #spinner {
     -webkit-animation-name: spincube;
     -webkit-animation-timing-function: ease-in-out;
     -webkit-animation-iteration-count: 1;
     -webkit-animation-fill-mode: forwards;
     -webkit-animation-duration: 2.7s; /* reduce total duration by a 3rd */
     -webkit-transform-style: preserve-3d;
     -webkit-transform-origin: 60px 60px 0;
 }