Question

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 1

虽然您已将animation-fill-mode设置为forwards（-webkit前缀不应该是您尝试使用Chrome时的问题），但动画并没有停在第3个框中，因为您的to设置（最后一个关键帧）将其恢复到原始状态（显示框1）。要解决此问题，您可以使最后一个keyframe保持与33％相同的位置（显示框3）。

＆＃13;

 #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;
 }

＆＃13;

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

＆＃13;

或者，您也可以更改下面的keyframe设置。请注意，我已将持续时间减少了三分之一，因为我们将关键帧更改了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;
 }

如何在最后一帧停止动画

1 个答案: