如何在CSS中使用@keyframes交叉淡入淡出图像库? [英] How to use @keyframes for cross-fade gallery of images in css?

问题描述

我有一个小提琴 (小提琴A)其中2张图片(2个图块)发生了淡入淡出的图片库.这是我使用过的html/css片段.

I have a fiddle (Fiddle A) in which cross-fade gallery of images happen for 2 images (2 tiles). Here is the snippets of html/css which I have used.

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

以下是@keyframes，我已为上面的html使用了2个图像(2个图块):

Here are the @keyframes which I have used 2 images (2 tiles) for the above html:

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

小提琴A 中的上述css动画效果非常好(这正是我想要的)，当有 2个图块(2张图像).

The above css-animation in Fiddle A is working perfectly fine(which is exactly what I want) when there are 2 tiles (2 images).

问题陈述:

上面的小提琴(小提琴A)对于2张图像效果很好.我想当有 3张和4张图像时出现相同的 css动画/淡入淡出图片库.

The above fiddle (Fiddle A) is working perfectly fine for 2 images. I want the same css-animation/cross-fade gallery of images happens when there 3 and 4 images.

这里是4个图像(4个图块)的提琴手 https://jsfiddle.net/zwjt8qko/1/embedded/result (小提琴B)

Here is the fiddle for 4 images(4 tiles) https://jsfiddle.net/zwjt8qko/1/embedded/result (Fiddle B)

这里是3个图像(3个图块)的提琴手 https://jsfiddle.net/f6gr7kL1/嵌入/结果(小提琴C)

Here is the fiddle for 3 images(3 tiles) https://jsfiddle.net/f6gr7kL1/embedded/result (Fiddle C)

我想知道应该对上方的小提琴B(4张图像)和小提琴C(3张图像)中的关键帧进行哪些更改，以使相同的 css-animation/cross- 正在发生小提琴A 中正在发生的褪色.

I am wondering what changes I should make in the keyframes in the Fiddle B (4 images) and Fiddle C (3 images) above so that the same css-animation/cross-fade happens which is happening in Fiddle A right now.

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

I am open to a JavaScript solution as well.

推荐答案

JavaScript方法

基本方法:

JavaScript method

Basic approach:

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

1. In your CSS, all pictures default to opacity: 0.
2. In your HTML, set a class name on one of the pictures that changes that picture's opacity to 1.
3. In JavaScript, periodically toggle that class throughout the pictures.
4. Don't even bother with keyframes and just do our delaying in JavaScript directly. This lets you more easily modify how long you want different parts of the pulsing animation to last instead of having to calculate the percentage of the total animation-duration like you'd have to with keyframes.

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>

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

I won't go into full detail here, but it would probably look something like this:

@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无关紧要.

Note that we don't even toggle the z-index because there's no point: only one of them is ever visible at a time. Just position them all on top of each other from the start, and their z-index won't matter.

(我认为问题中动画的z-index部分甚至都没有做任何事情，因为z-index无法动画.)

(I don't think the z-index portion of the animation you have in your question is even doing anything because z-index isn't animatable.)

这篇关于如何在CSS中使用@keyframes交叉淡入淡出图像库?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！