Javascript 我后来的div背景不'；如果在div中放置文本动画效果，则不会显示

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>

.rw单词{
显示：内联；
文本缩进：10px；
}
.rw-words-1 h3{
位置：绝对位置；
不透明度：0；
溢出：隐藏；
颜色：#6b969d；
-webkit动画：rotateWord 18s线性无限0s；
-moz动画：rotateWord 18s线性无限0s；
-o-动画：rotateWord 18s线性无限0s；
-ms动画：rotateWord 18s线性无限0s；
动画：rotateWord 18s线性无限0s；
}
.rw-words-1h3:n第n个孩子（2）{
-webkit动画延迟：3s；
-moz动画延迟：3s；
-o-动画延迟：3s；
-ms动画延迟：3s；
动画延迟：3s；
颜色：#6b889d；
}
.rw-words-1h3:n第n个孩子（3）{
-webkit动画延迟：6s；
-moz动画延迟：6s；
-o-动画延迟：6s；
-ms动画延迟：6s；
动画延迟：6秒；
颜色：#6b739d；
@关键帧旋转方向{
0%{不透明度：0；}
2%{opacity:0；transform:translateY（-30px）；}
5%{不透明度：1；变换：translateY（0px）；}
17%{不透明度：1；变换：translateY（0px）；}
20%{不透明度：0；变换：translateY（30px）；}
80%{不透明度：0；}
100%{不透明度：0；}
}

动画结束

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

关于我们
当你的盘子里有很多食物时，把真正好的食物，从真正好的原料，放在餐桌上可能会很麻烦。

但是想象一下，如果“晚餐吃什么？”这个简单的答案对你来说更合适

在结束时尝试不使用

0s

？例如，

动画：旋转方向18s线性无限；

？

后期动画延迟

属性

可能未根据语法指南按正确顺序定位

语法
形式语法：| | | | | | | | | |
顺序在每个动画定义中都很重要：可以解析为的第一个值指定给动画持续时间，第二个值指定给动画延迟。

谢谢你提供的信息。Donno我怎么会错过它。我已经纠正了它，但是它对我的错误没有影响。仍然没有显示背景。@NitishParab不会出现在

css

中设置了

背景

属性的地方。如果可能的话，既不能创建常规

css

属性，也不能创建

@关键帧

e一个JSFIDLE？这是我对JSFIDLE的看法，由于某些原因链接不起作用，但你可以滚动查看问题。由于“slide1”中的测试动画，slide2和slide5的背景没有显示。我试图找出问题，到目前为止，我认为“数据恒星背景比”属性与css3的关键帧冲突“。任何帮助都将不胜感激。@NitishParab

html

，

css

来自jsfiddle a）

css

与原始帖子有相同的问题，例如，在第132行：

-webkit动画：rotateWord 18s线性无限0s；

at0sb）

html

元素嵌套问题，例如，at

\slide1

，

div.rw-wordsspan.demo4

；c）额外的

在

#slide1

关闭；d）额外的

在

#slide4

关闭。地址

html

和

css

语法问题？

动画

原始问题的语法问题未调整？可能调整

html

，

css

语法，接受还是不发原始问题，发新问题？如果可以的话很乐意帮忙谢谢

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.