html - 如何创建淡入/淡出图像动画

Question

我想调整下面正在运行的现有代码，以支持不止两个图像。

HTML:

<div id="cf">
  <img class="bottom" src="<?php bloginfo('template_directory') ?>/assets/img/image1" />
  <img class="top" src="<?php bloginfo('template_directory') ?>/assets/img/image2" />
</div>

CSS:

#cf {
  position:relative;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 4s ease-in-out;
  -moz-transition: opacity 4s ease-in-out;
  -o-transition: opacity 4s ease-in-out;
  transition: opacity 4s ease-in-out;
}

@keyframes cf3FadeInOut {
  0% {
    opacity:1;
  }
  45% {
    opacity:1;
  }
  55% {
    opacity:0;
  }
  100% {
    opacity:0;
  }
}

#cf img.top {
  animation-name: cf3FadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 4s;
  animation-direction: alternate;
}

我知道它很接近，但我不确定如何编写它以支持更多图像。想法或建议？

Answer 1

设置一个包含动画的类。 将此类用于所需的图像。

例子

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.fadeOut {
  opacity: 0;
  animation-name: fadeOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 4s;
  animation-direction: alternate;
}

<img class="fadeOut" src="http://via.placeholder.com/40x40">
<img class="fadeOut" src="http://via.placeholder.com/40x40">
<img class="fadeOut" src="http://via.placeholder.com/40x40">