Html 为CSS动画添加10秒暂停

我正在熟悉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); }
}

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

代码如下：

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>

非常感谢您的任何建议/建议/建设性批评

编辑：

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

这是完整的代码（）：

#容器{
溢出：隐藏；
高度：48px；
}
.哇{
-webkit动画：移动；
动画：移动；
位置：相对位置；
-webkit动画持续时间：40秒；
动画持续时间：40秒；
-webkit动画迭代计数：无限；
动画迭代次数：无限；
-webkit动画计时功能：单步启动；
动画计时功能：步进启动；
-webkit动画延迟：10秒；
动画延迟：10秒；
}
h2{高度：48px；边距：0；填充：0}
@-webkit关键帧移动{
0%{页边距顶部：0em；}
25%{利润率最高：-48px；}
50%{利润率最高：-96px；}
75%{利润率顶部：-144px；}
100%{页边距顶部：0；}
}
@关键帧移动{
0%{页边距顶部：0em；}
25%{利润率最高：-48px；}
50%{利润率最高：-96px；}
75%{利润率顶部：-144px；}
100%{页边距顶部：0；}
}
氢{
-webkit动画：淡入淡出；
动画：淡入淡出；
-webkit动画持续时间：10秒；
动画持续时间：10秒；
-webkit动画迭代计数：无限；
动画迭代次数：无限；
}
@-webkit关键帧淡入淡出{
0%{不透明度：0；过滤器：alpha（不透明度=0）；}
10%{不透明度：1；过滤器：alpha（不透明度=100）；}
100%{不透明度：1；过滤器：alpha（不透明度=100）；}
}
@关键帧淡入淡出{
0%{不透明度：0；过滤器：alpha（不透明度=0）；}
10%{不透明度：1；过滤器：alpha（不透明度=110）；}
100%{不透明度：1；过滤器：alpha（不透明度=100）；}
}

这里有一些东西
弗洛布
东古斯
胡说八道
尤恩德尔

感谢您抽出时间与我们分享一个例子，这让我们了解到我做错了什么。