Question

我熟悉CSS动画，并试图通过淡入淡出过渡来切换内容。

我在这里寻找建议：我尝试让每个文本元素保持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>

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）：

＆＃13;

#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); }
}

＆＃13;

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

＆＃13;

为CSS动画添加10秒的暂停

1 个答案: