javascript - 如果我在 div 中放置文本动画效果，我的后续 div 背景不会显示

Question

动画的 CSS3，其想法是在连续循环的基础上淡入某些单词。

<style>
.rw-words{
display: inline;
text-indent: 10px;
}
.rw-words-1 h3{
position: absolute;
opacity: 0;
overflow: hidden;
color: #6b969d;
-webkit-animation: rotateWord 18s linear infinite 0s;
-moz-animation: rotateWord 18s linear infinite 0s;
-o-animation: rotateWord 18s linear infinite 0s;
-ms-animation: rotateWord 18s linear infinite 0s;
animation: rotateWord 18s linear infinite 0s;
}
.rw-words-1 h3:nth-child(2) { 
-webkit-animation-delay: 3s; 
-moz-animation-delay: 3s; 
-o-animation-delay: 3s; 
-ms-animation-delay: 3s; 
animation-delay: 3s; 
color: #6b889d;
}
.rw-words-1 h3:nth-child(3) { 
-webkit-animation-delay: 6s; 
-moz-animation-delay: 6s; 
-o-animation-delay: 6s; 
-ms-animation-delay: 6s; 
animation-delay: 6s; 
color: #6b739d; 


@keyframes rotateWord {
0% { opacity: 0; }
2% { opacity: 0; transform: translateY(-30px); }
5% { opacity: 1; transform: translateY(0px);}
17% { opacity: 1; transform: translateY(0px); }
20% { opacity: 0; transform: translateY(30px); }
80% { opacity: 0; }
100% { opacity: 0; }
}

</style>

动画结束

<div class="slideContainers" id="sC1">

1.h3元素应该淡入的文本动画

<span class="demo4"> We do the
<div class="rw-words rw-words-1">
<h3>zumba</h3>
<h3>rumba</h3>
<h3>happiness</h3>


              </div> 
           here.   </span> 

2。文字动画结束

        </div><!-- sC1 ends -->   
        </div><!-- slide1 ends -->

3。背景消失的幻灯片2

    <div id="slide2" class="slide" data-slide="2" data-stellar-background-ratio="0.5">
        <div class="slideContainers" id="sC2">
            <h1 class="pageTitle">About Us</h1>
            <p id="aboutCopy" class="copy">When there's a lot on your plate, putting real good food, from real good ingredients, on the dinner table can be a hassle.<br>
But imagine if the easy answer to "What's for dinner?" was the better one for you.        </p>

        </div><!-- sC2 ends -->    
    </div><!-- slide2 ends -->

Answer 1

试过最后没有 0 吗？即，animation: rotateWord 18s linear infinite; ?根据语法指南，animation-delay property 可能未按正确的顺序放置

https://developer.mozilla.org/en-US/docs/Web/CSS/animation#Syntax

Syntax
Formal syntax: <single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode>

The order is important within each animation definition: the first value that can be parsed as a <time> is assigned to the animation-duration, and the second one is assigned to animation-delay.