循环中使用 CSS 的图像之间的交叉淡入淡出答案

【问题标题】：Cross-Fade between images with CSS in loop循环中使用 CSS 的图像之间的交叉淡入淡出
【发布时间】：2021-05-29 19:11:05
【问题描述】：

我想在循环中的图像之间淡入淡出（就像这里的结果-jsfiddle.net/5M2PD）但纯粹是通过CSS，而不是JavaScript。我尝试使用关键帧，但没有成功。请帮忙。

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

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

【问题讨论】：

对于未来来说这可能是一个有趣的想法，但我认为大多数当前的浏览器不会喜欢@keyframes - 甚至更多，因为大多数人不使用最新版本。
感谢 MightyPork 的建议。还有其他选择吗？仅适用于 CSS？
我不这么认为.. 就个人而言，我会坚持使用 JS，但如果这不是一个选项，我不知道。
动画在大多数浏览器中仍然带有前缀（-webkit-animation、-webkit-keyframes），这可能是您的问题的一部分。澄清一下，您要将 top 应用于下一张图像，然后您希望该图像淡入？您可以为此使用过渡，而不是动画。
这里有一篇很有帮助的帖子：devtwins.com/blog/css-cross-fading-images

标签： css fade keyframe

【解决方案1】：

我以你的小提琴为基础，让它在没有脚本的情况下工作。

updated demo

我需要为 HTML 设置一个 id

.fadein img {
    position:absolute;
    top:0;
    -webkit-animation-name: fade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 6s;
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 6s;
}

@-webkit-keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}

#f1 {
    background-color: lightblue;
}
#f2 {
    -webkit-animation-delay: -4s;
    background-color: yellow;
}
#f3 {
    -webkit-animation-delay: -2s;
    background-color: lightgreen;
}

<div class="fadein">
    <img id="f3" src="http://i.imgur.com/R7A9JXc.png">
    <img id="f2" src="http://i.imgur.com/D5yaJeW.png">
    <img id="f1" src="http://i.imgur.com/EUqZ1Er.png">
</div>

我正在设置关键帧以使大约 1/3 的时间可见，并带有适当的过渡。然后我为每张图片设置不同的延迟，让它们交替出现。如果您想要完整的浏览器支持，您将需要更多供应商前缀。我使用了 -webkit- 和 bare 属性，以便您了解。

【讨论】：

不错！我怎样才能只为两个图像设置这个？我找不到，我试图从标记中删除 <img id="f3" src="http://i.imgur.com/R7A9JXc.png"> 并从 CSS 代码中删除 #f3 { -webkit-animation-delay: -2s; background-color: lightgreen; }。但它不起作用。
@alessadro 关键帧将不透明度更改为 33%，因为有 3 个元素。您需要将其更改为 50% 以调整 2 个元素
@candlejack 对于 2 个元素而不是 3 个元素，删除所有提到的 f3，就像您已经完成的那样，并将 #f2 上的 -webkit-animation-delay 更改为 -2s。最后，将-webkit-animation-duration（和animation-duration）改为4s。
在最新的 Chrome、Firefox、Edge 浏览器上运行良好。
现在可以在 #f1 上使用 nth-of-type jsfiddle.net/4d1uwj5f

【解决方案2】：

我已经使用 SASS 制作了一个动态解决方案。可以配置：

动画总时间
商品数量
过渡速度

它会自动计算关键帧百分比和项目之间的延迟。

Codepen.io demo

// Demo styles
.fadecycle div {
  opacity: 0;
  position: absolute;
  width: 200px;
  line-height: 200px;
  text-align: center;
}

.fadecycle div:nth-child(1) { background: lightsalmon; }
.fadecycle div:nth-child(2) { background: lightsteelblue; }
.fadecycle div:nth-child(3) { background: lightseagreen; }
.fadecycle div:nth-child(4) { background: lightskyblue; }

// Animation settings
$totalTime: 8s;
$items: 4;
$transitionSpeed: 1.5;

// Calculate transition + display time in seconds
$transitionTime: 0s + $totalTime / ($items * $transitionSpeed * 2);
$displayTime: (0s + $totalTime - ($transitionTime * $items)) / $items;

// Set transition for each element
@for $i from 1 through $items {
  .fadecycle div:nth-child(#{$i}) {
    // Delay is increased for each item
    // starting with an offset of -$transitionTime so the first element is displayed on load
    $delay: -$transitionTime + ($transitionTime + $displayTime) * ($i - 1);
    animation: fadeinout $totalTime linear $delay infinite;
  }
}

// Calculate percentages of the times for keyframes
$transitionPercentage: 0% + 100 * ($transitionTime / $totalTime);
$displayPercentage: 0% + 100 * ($displayTime / $totalTime);

@keyframes fadeinout {
  0% {
    opacity: 0;
  }
  #{$transitionPercentage},
  #{$transitionPercentage + $displayPercentage} {
    opacity: 1;
  }
  #{$transitionPercentage + $displayPercentage + $transitionPercentage},
  100% {
    opacity: 0;
  }
}

【讨论】：

【解决方案3】：

根据您想要的图像数量、您希望每张图像显示多长时间以及您希望淡入淡出过渡持续多长时间，您每次都需要不同的关键帧值。可以在此处找到有关如何正确执行此操作的有用帖子：https://www.devtwins.com/blog/css-cross-fading-images

【讨论】：