纯粹的CSS 旋转的立方体在表面暂停，然后播放

Question

在下面的例子中，谁能帮我把一个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秒，然后运行到下一个FACE，然后暂停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>