如何在 css 中使用 @keyframes 交叉淡入淡出图像库？

Question

我有一个 fiddle (Fiddle A)，其中 2 个图像（2 个图块）的图像库交叉淡入淡出。这是我使用过的 html/css 的片段。

<div class="featured-block" style="display:flex; justify-content: center;">
  <a href="https://www.google.com/" class="featured-block__item cf">
    <div class="featured-block__item-inner">
      <figure class="featured-block__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
        <img class="default-opacity" src="https://i.imgur.com/EUqZ1Er.png" data-fallback-img="https://i.imgur.com/EUqZ1Er.png" alt="Outburst">
      </figure>
    </div>
  </a>
</div>

这是我在上面使用了 2 个图像（2 个图块）的 @keyframes html:

@keyframes cf4FadeInOut {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
        z-index: 999;
    }
    33% {
        opacity: 1;
    }
    53% {
        opacity: 0;
        z-index: 1;
    }
    100% {
        opacity: 0;
    }
}

上面的 css-Fiddle A 中的动画效果非常好（这正是我想要的) 当有 2 个图块（2 个图像）.

问题陈述：

上面的 fiddle (Fiddle A) 对 2 张图像工作得很好。我想要相同的 css-animation/cross-fade 图片库 当有 3 和 4 张图片.

这里是 fiddle 4 张图片（4 个图块）https://jsfiddle.net/zwjt8qko/1/embedded/result (Fiddle B)

这是 3 张图片（3 个图块）的 fiddle https://jsfiddle.net/f6gr7kL1/embedded/result (Fiddle C)

我想知道我应该对 Fiddle B（4 张图片）和 Fiddle C（3 张图片）中的 关键帧进行哪些更改所以现在 css-animation/cross-fade 发生在 Fiddle A 中。

我也愿意接受 JavaScript 解决方案。

Answer 1

JavaScript方法

基本方法：

在你的CSS中，所有图片默认为opacity: 0。
在您的 HTML 中，为其中一张图片设置 class 名称，将图片的不透明度更改为 1。
在 JavaScript 中，在整个图片中定期切换 class。
甚至不用担心关键帧，直接在 JavaScript 中进行延迟即可。这使您可以更轻松地修改您希望脉冲动画的不同部分持续多长时间，而不必像使用关键帧那样计算总百分比 animation-duration。

const pics = document.querySelectorAll('.pic');
const lastPic = pics.length - 1;
const transitionDuration = 800; // matches CSS
const transitionDelay = 3000; // up to you
const totalDelay = transitionDuration + transitionDelay;
const intervalDelay = (transitionDuration * 2) + transitionDelay; // time to fade out + time to fade in + time to stay active

function toggleClass() {
  const activePic = document.querySelector('.pic.active');
  const activeIndex = Array.prototype.indexOf.call(pics, activePic);
  const nextIndex = activeIndex === lastPic ? 0 : activeIndex + 1;
  const nextPic = pics[nextIndex];

  setTimeout(() => activePic.classList.remove('active'), transitionDelay);
  setTimeout(() => nextPic.classList.add('active'), totalDelay);
}

setInterval(toggleClass, intervalDelay);

.wrapper {
  width: 400px;
  height: 300px;
  position: relative;
}
.pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 800ms ease; /* immediately start fading out when active class is lost */
}
.pic.active {
  opacity: 1;
}

<div class="wrapper">
  <img class="pic active" src="https://via.placeholder.com/400x300?text=picture%201" alt="">
  <img class="pic" src="https://via.placeholder.com/400x300?text=picture%202" alt="">
  <img class="pic" src="https://via.placeholder.com/400x300?text=picture%203" alt="">
  <img class="pic" src="https://via.placeholder.com/400x300?text=picture%204" alt="">
</div>

关键帧方法

我不会在这里详细介绍，但它可能看起来像这样：

@keyframes pulse1 {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
}

@keyframes pulse2 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  45% {
    opacity: 0;
  }
}

@keyframes pulse3 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  70% {
    opacity: 0;
  }
}

@keyframes pulse4 {
  0% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
}

请注意，我们甚至不切换 z-index，因为没有意义：一次只能看到其中一个。从一开始就将它们全部放在彼此之上，它们的 z-index 无关紧要。

（我认为您问题中的动画 z-index 部分甚至没有做任何事情，因为 z-index 不可设置动画。）

如何在 css 中使用 @keyframes 交叉淡入淡出图像库？

How to use @keyframes for cross-fade gallery of images in css?

javascript

css

keyframe

css-animations

cross-fade

JavaScript方法

关键帧方法