PURE CSS 旋转立方体在表面暂停然后播放

Question

在下面的例子中，有人可以帮忙在Front，back top在视图中时将FACE暂停8秒，然后播放动画。

代码如下：

body {
 color: rgb(6, 106, 117);
 text-transform: uppercase;
 font-family: sans-serif;
 font-size: 100%;
 background: #F4F6F8;
 padding: 3em 0 0 0;
 line-height: 62px;
 -webkit-perspective: 1000px;
}

.cube {
 width: 30%;
 text-align: center;
 margin: 0 auto;
 height: 100px;

 -webkit-transform-style: preserve-3d;
 -webkit-animation: rotate-cube 10s linear infinite;
}

.front, .bottom, .top, .back {
 background: rgb(247, 247, 247);
 border: 1px solid rgba(147, 184, 189, .8);
 -webkit-border-radius: 5px;
 -webkit-box-shadow: 0 5px 20px rgba(105, 108, 109, .3), 0 0 8px 5px rgba(208, 223, 226, .4) inset;
 height: 100px;
    position: absolute;
    width: 100%;
}

.front {
 -webkit-transform: translateZ(50px);
}

.bottom {
 -webkit-transform: rotateX(90deg) translateZ(-50px) rotateY(180deg) rotateZ(180deg);
}

.top {
 -webkit-transform: rotateX(-90deg) translateZ(-50px) rotateY(180deg) rotateZ(180deg);
}

.back {
 -webkit-transform: rotateX(180deg) translateZ(50px);
}

@-webkit-keyframes rotate-cube {
 0%{-webkit-transform: rotateX(0deg);}
 10%{-webkit-transform: rotateX(90deg);}
 40%{-webkit-transform: rotateX(180deg);}
 60%{-webkit-transform: rotateX(270deg);}
 90%{-webkit-transform: rotateX(360deg);}
 100{-webkit-transform: rotateX(360deg);}
}

<div class="cube">
 <div class="front">
  <h1>Front</h1>
 </div>
 <div class="bottom">
  <h2>Bottom</h2>
 </div>
 <div class="top">
  <h2>Top</h2>
 </div>
 <div class="back">
  <h2>Back</h2>
 </div>
</div>

我需要的是在正面视图时暂停 8 秒，然后运行下一个面孔，然后暂停 8 秒，然后运行下一个视图...

基本上，我需要为每张脸添加一个停顿...感谢帮助。

Answer 1

请看这里

body {
 color: rgb(6, 106, 117);
 text-transform: uppercase;
 font-family: sans-serif;
 font-size: 100%;
 background: #F4F6F8;
 padding: 3em 0 0 0;
 line-height: 62px;
 -webkit-perspective: 1000px;
}

.cube {
 width: 30%;
 text-align: center;
 margin: 0 auto;
 height: 100px;

 -webkit-transform-style: preserve-3d;
 -webkit-animation: rotate-cube 33s linear infinite;
}

.front, .bottom, .top, .back {
 background: rgb(247, 247, 247);
 border: 1px solid rgba(147, 184, 189, .8);
 -webkit-border-radius: 5px;
 -webkit-box-shadow: 0 5px 20px rgba(105, 108, 109, .3), 0 0 8px 5px rgba(208, 223, 226, .4) inset;
 height: 100px;
    position: absolute;
    width: 100%;
}

.front {
 -webkit-transform: translateZ(50px);
}

.bottom {
 -webkit-transform: rotateX(90deg) translateZ(-50px) rotateY(180deg) rotateZ(180deg);
}

.top {
 -webkit-transform: rotateX(-90deg) translateZ(-50px) rotateY(180deg) rotateZ(180deg);
}

.back {
 -webkit-transform: rotateX(180deg) translateZ(50px);
}

@-webkit-keyframes rotate-cube {
 0%{-webkit-transform: rotateX(0deg);}
  24%{-webkit-transform: rotateX(0deg);}
 25%{-webkit-transform: rotateX(90deg);}
  49%{-webkit-transform: rotateX(90deg);}
 50%{-webkit-transform: rotateX(180deg);}
  74%{-webkit-transform: rotateX(180deg);}
 75%{-webkit-transform: rotateX(270deg);}
  99%{-webkit-transform: rotateX(270deg);}
 99.999%{-webkit-transform: rotateX(360deg);}
  100%{-webkit-transform: rotateX(0deg);}
}

<div class="cube">
 <div class="front">
  <h1>Front</h1>
 </div>
 <div class="bottom">
  <h2>Bottom</h2>
 </div>
 <div class="top">
  <h2>Top</h2>
 </div>
 <div class="back">
  <h2>Back</h2>
 </div>
</div>

PURE CSS 旋转立方体在表面暂停然后播放

PURE CSS Rotating cube pause at face and then play

css

rotation

cube

playback

pause