我有一个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>
以下是我在上面的 html 中使用了 2 个图像(2 个图块)的 @keyframes:
@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 张图片).
问题陈述:
上面的小提琴(小提琴 A)对于 2 个图像来说工作得非常好。我想要同样的css-animation/交叉淡入淡出图像库当有时发生3 和 4 图像.
这是 4 张图像(4 个图块)的小提琴https://jsfiddle.net/zwjt8qko/1/embedded/result(小提琴B)
这是 3 张图像(3 个图块)的小提琴https://jsfiddle.net/f6gr7kL1/embedded/result(小提琴C)
我想知道我应该做出哪些改变Fiddle B(4 个图像)和 Fiddle C(3 个图像)中的关键帧上面这样,同样的CSS 动画/交叉淡入淡出发生的事情正在发生Fiddle A现在。
我也对 JavaScript 解决方案持开放态度。