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