我只想显示文本并隐藏，然后是下一个文本并隐藏，然后是最后一个文本并隐藏并重复。我怎样才能做到这一点？我一直在看代码，但我仍然迷路了。任何帮助是极大的赞赏!
我的代码:
<style>
#myArea {
height:250px;
width:300px;
position:relative;
}
.text {
position:absolute;
z-index:1;
bottom:20px;
left:10px;
}
</style>
<body>
<div id="myArea">
<img src="images/backgrnd.jpg" />
<div id="txt1" class="text">
<img src="images/text1.png" />
</div>
<div id="txt2" class="text">
<img src="images/text2.png" />
</div>
<div id="txt3" class="text">
<img src="images/text3.png" />
</div>
</div>
最佳答案
实现您正在寻找的效果相当简单。您所需要的只是将图像完全放在彼此之上，然后添加相应地更改图像(或其容器)的 opacity 的动画。
在循环中为多个元素设置动画的关键部分是
- 确保第二个和后续元素的动画在所有前面的元素完成其动画之后开始
- 确保所有前面的元素都保持在最终状态，直到其他元素完成它们的动画(否则它们会弄乱动画)。
第一部分可以通过在元素上使用渐进式 animation-delay 来实现，而第二部分可以通过相应地设置 @keyframes 来实现。在这里，由于有 3 个图像，每个图像的动画应该在 33% 标记本身完成(因为在其他 66% 期间，另外 2 个将执行它们的动画)。 33%的状态应该保持到100%。
(如果您有 4 张图片，它应该以 25% 的速度完成，依此类推。)
#myArea {
height: 250px;
width: 300px;
position: relative;
}
.text {
position: absolute;
z-index: 1;
bottom: 20px;
left: 10px;
opacity: 0;
animation: fade-in-out 9s ease backwards infinite 1s; /* initial delay is for image to load */
}
.text:nth-of-type(2) {
animation-delay: 4s; /* this must start after first has faded-out */
}
.text:nth-of-type(3) {
animation-delay: 7s; /* this must start after second has also faded-out */
}
@keyframes fade-in-out {
0% {
opacity: 0;
}
11%, 22% {
opacity: 1;
}
33%, 100% {
opacity: 0;
}
}<div id="myArea">
<img src="http://lorempixel.com/300/250/abstract/2" />
<div id="txt1" class="text">
<img src="http://lorempixel.com/200/200/animals/1" />
</div>
<div id="txt2" class="text">
<img src="http://lorempixel.com/200/200/animals/2" />
</div>
<div id="txt3" class="text">
<img src="http://lorempixel.com/200/200/animals/3" />
</div>
</div>关于css - 使用 CSS 而不是带循环的 gif 动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35999329/