向CSS动画添加10秒暂停

Question

我熟悉CSS动画，并试图用淡入淡出转换切换内容。

Link to Codepen Example

这里就是我在寻找的建议：我想，而不是间隔1秒我必须让每个文本元素保持10秒切换到下一个之前，马上。我尝试过更改动画延迟设置，但这并没有达到我预期的效果。

下面的代码：

HTML

<h1>Here's some stuff</h1> 
<div id="container"> 
    <div class='whoiam'> 
    <h2>Florb</h2> 
    <h2>Dongus</h2> 
    <h2>Bizzlebrop</h2> 
    <h2>Yoindle</h2><!--This value will be the last to show on loop. --> 
    </div> 
</div> 

CSS

#container{ 
overflow:hidden; 
height:48px; 
} 

.whoiam{ 
-webkit-animation: move; 
     animation: move; 
position:relative; 
-webkit-animation-duration: 8s; 
     animation-duration: 8s; 
-webkit-animation-iteration-count: infinite; 
     animation-iteration-count: infinite; 
-webkit-animation-timing-function: step-start; 
     animation-timing-function: step-start; 
-webkit-animation-delay: 1s; 
     animation-delay: 1s; 
} 
h2{ height:48px;margin:0;padding:0} 
@-webkit-keyframes move { 
0% { margin-top: 0em; } 
25% { margin-top: -48px; } 
50% {margin-top: -96px;} 
75% {margin-top: -144px; } 
100% {margin-top: 0;} 
} 
@keyframes move { 
0% { margin-top: 0em; } 
25% { margin-top: -48px; } 
50% {margin-top: -96px;} 
75% {margin-top: -144px; } 
100% {margin-top: 0;} 
} 

h2{ 
-webkit-animation: fade; 
     animation: fade; 
-webkit-animation-duration: 2s; 
     animation-duration: 2s; 
-webkit-animation-iteration-count: infinite; 
     animation-iteration-count: infinite; 
} 

@-webkit-keyframes fade { 
0% { opacity: 1; filter:alpha(opacity=100); } 
50% { opacity: 0; filter:alpha(opacity=0); } 
100% { opacity: 1; filter:alpha(opacity=100); } 
} 

@keyframes fade { 
0% { opacity: 1; filter:alpha(opacity=100); } 
50% { opacity: 0; filter:alpha(opacity=0); } 
100% { opacity: 1; filter:alpha(opacity=100); } 
} 

任何意见/建议/建设性的批评意见，非常感谢！

Answer 1

编辑：

.whoiam { 
    animation-duration: 40s; /* 4 x 10s */ 
    animation-delay: 10s; 
} 

h2 { animation-duration: 10s; } 

@keyframes fade { 
    0% {opacity: 0;} 
    10% {opacity: 1;} 
    100% {opacity:1;} 
} 

这是完整的代码（the pen）：

#container{ 
 
    overflow:hidden; 
 
    height:48px; 
 
} 
 
.whoiam{ 
 
    -webkit-animation: move; 
 
      animation: move; 
 
    position:relative; 
 
    -webkit-animation-duration: 40s; 
 
      animation-duration: 40s; 
 
    -webkit-animation-iteration-count: infinite; 
 
      animation-iteration-count: infinite; 
 
    -webkit-animation-timing-function: step-start; 
 
      animation-timing-function: step-start; 
 
    -webkit-animation-delay: 10s; 
 
      animation-delay: 10s; 
 
} 
 
h2{ height:48px;margin:0;padding:0} 
 
@-webkit-keyframes move { 
 
    0% { margin-top: 0em; } 
 
    25% { margin-top: -48px; } 
 
    50% {margin-top: -96px;} 
 
    75% {margin-top: -144px; } 
 
    100% {margin-top: 0;} 
 
} 
 
@keyframes move { 
 
    0% { margin-top: 0em; } 
 
    25% { margin-top: -48px; } 
 
    50% {margin-top: -96px;} 
 
    75% {margin-top: -144px; } 
 
    100% {margin-top: 0;} 
 
} 
 

 
h2{ 
 
    -webkit-animation: fade; 
 
      animation: fade; 
 
    -webkit-animation-duration: 10s; 
 
      animation-duration: 10s; 
 
    -webkit-animation-iteration-count: infinite; 
 
      animation-iteration-count: infinite; 
 
} 
 

 
@-webkit-keyframes fade { 
 
    0% { opacity: 0; filter:alpha(opacity=0); } 
 
    10% { opacity: 1; filter:alpha(opacity=100); } 
 
    100% { opacity: 1; filter:alpha(opacity=100); } 
 
} 
 

 
@keyframes fade { 
 
    0% { opacity: 0; filter:alpha(opacity=0); } 
 
    10% { opacity: 1; filter:alpha(opacity=110); } 
 
    100% { opacity: 1; filter:alpha(opacity=100); } 
 
}

<h1>Here's some stuff</h1> 
 
<div id="container"> 
 
<div class='whoiam'> 
 
    <h2>Florb</h2> 
 
    <h2>Dongus</h2> 
 
    <h2>Bizzlebrop</h2> 
 
    <h2>Yoindle</h2> 
 
</div> 
 
</div>