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