Question

我只想基本显示文字和隐藏，然后是下一个文字和隐藏，然后是最后一个文字并隐藏和重复。我怎样才能做到这一点？我一直在看代码，但我还是迷路了。任何帮助是极大的赞赏！

我的代码：

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

Answer 1

实现您正在寻找的效果相当简单。所需要的只是让您将图像绝对放在彼此之上，然后添加动画，相应地更改图像（或其容器）的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>

Answer 2

您是否正在寻找steps计时功能？它提供了一种类似gif的方式来动画图像集！

有一个例子：https://jsfiddle.net/simurai/CGmCe/

来自MDN的

：https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function

希望它有所帮助！

使用CSS而不是带循环的gif进行动画制作

2 个答案: