CSS 动画 - 让图像一个接一个淡入淡出

Question

我有一排图片，我想在一个又一个的图像中淡入淡出。

 .jumbotron > div > div picture > img{

animation: fadein 6s;
-moz-animation: fadein 6s; /* Firefox */
-webkit-animation: fadein 6s; /* Safari and Chrome */
-o-animation: fadein 6s; /* Opera */

 }

 @keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

这段代码让所有图像同时淡入。

我正在将typo3 与模板一起使用，因此html 结构有点复杂- 对不起。

<section class="jumbotron">
<div class="container">
<div class="row">
<div class="col-xs-12">

<div id="c1170" class="">
<div class="row">
<div class="col-xl-9 col-lg-9 col-md-9 col-sm-12 col-xs-12">
<div class=" ">
<div id="c1163" class="">
<div class="row">
<div class="col-xl-2 col-lg-2 col-md-2 col-sm-6 col-xs-6">
<div class=" ">
<div id="c1164" class="">
<div class="ce-textpic ce-left ce-above">
<div class="" >
 <div class="row">
 <div class=" col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 ">
 <div class="ce-media">
 <picture alt="Geigen3D_m_02.gif">
 <video style="display: none;"><![endif]-->
 <![CDATA[ orig Width: 123px ]]>
 <![CDATA[ xs scale: 0.5, 544px, max: 272px]]>
 <source srcset="fileadmin/images/buecher/erzaehlungen/Geigen3D_m_02.gif" media="(max-width: 544px)">
 <![CDATA[ sm scale: 0.5, 768px, max: 384px]]>
 <source srcset="fileadmin/images/buecher/erzaehlungen/Geigen3D_m_02.gif" media="(max-width: 768px)">
 <![CDATA[ md scale: 0.125, 992px, max: 124px]]>
 <source srcset="fileadmin/images/buecher/erzaehlungen/Geigen3D_m_02.gif" media="(max-width: 992px)">
 <![CDATA[ lg scale: 0.125, 1200px, max: 150px]]>
 <source srcset="fileadmin/images/buecher/erzaehlungen/Geigen3D_m_02.gif" media="(min-width: 992px)">
 </video><![endif]-->
 <img src="fileadmin/images/buecher/erzaehlungen/Geigen3D_m_02.gif"
 alt="Geigen3D_m_02.gif "
 title=""
 class="img-fluid m-b-1 " />
 </picture>
 </div>

 </div>

 <div class="clearfix hidden-sm-up"></div>



 <div class="hidden-xs-down clearfix hidden-md-up"></div>



 <div class="hidden-sm-down clearfix hidden-lg-up"></div>



 <div class="hidden-md-down clearfix hidden-xl-up"></div>



 <div class="hidden-lg-down clearfix"></div>



 </div>
</div>

<div class="ce-bodytext">


</div>

</div>

</div>
</div>

</div>
<div class="col-xl-2 col-lg-2 col-md-2 col-sm-6 col-xs-6">
<div class=" ">

<div id="c1165" class="">
<div class="ce-textpic ce-left ce-above">
<div class="" >
 <div class="row">
 <div class=" col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 ">


 <div class="ce-media">




<!--next picture begins-->

 <picture alt="image.gif">

等等等等...

欢迎所有解决方案（纯 css 解决方案会很棒），感谢您的阅读！

Answer 1

这是一个仅使用 CSS 的解决方案，使用的方法类似于您开始使用的方法。我已经简化了 HTML 和 CSS 以专注于重要部分。

总体思路

根据需要布置图像。在这种情况下，我使用了一个<ul>带有<li>元素的元素来保存图像，并将它们水平放置。

fadeIn为图像添加动画。

现在这是关键，animation-delay为每个图像添加一个，取决于它在阵容中的编号。第一个不会有延迟。第二，延迟3秒。第 3 次，6 秒延迟，依此类推。这个时间来自animation-duration3s。第一个图像淡入后，第二个将淡入。第二个图像淡入后，第三个将淡入，以此类推。

未知数量的图像？

如果图像数量未知，这种方法仍然可以使用，尽管这意味着创建一些可能永远不会使用的 CSS 样式。您需要创建：

li:nth-child(N) > img {
  animation-delay: [animation-duration * N]s;
}

对于您认为将拥有的最大图像数量。因此，如果您可能有 100 张图像，并且animation-duration设置为 3 秒，那么您将创建 100 个这些片段，一直到：

li:nth-child(100) > img {
  animation-delay: 300s;
}

演示

li:nth-child(N) > img {
  animation-delay: [animation-duration * N]s;
}

li:nth-child(100) > img {
  animation-delay: 300s;
}

这是Codepen上的相同演示。