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-duration的3s。第一个图像淡入后，第二个图像会淡入。第二个图像淡入后，第三个图像会淡入，等等。

图片数量未知？

如果图像数量未知，仍然可以使用此方法，但这意味着创建一些可能永远不会使用的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;
}

<强>演示

ul {
  position: relative;
  width: 100%
}

li {
  float: left;
  width: 25%;
}

img {
  width: 100%;
  opacity: 0;
  animation-name: fadeIn;
  animation-duration: 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

li:nth-child(2) > img {
  animation-delay: 3s;
}

li:nth-child(3) > img {
  animation-delay: 6s;
}

li:nth-child(4) > img {
  animation-delay: 9s;
}

li:nth-child(5) > img {
  animation-delay: 12s;
}

li:nth-child(6) > img {
  animation-delay: 15s;
}

li:nth-child(7) > img {
  animation-delay: 18s;
}

li:nth-child(8) > img {
  animation-delay:21s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  
  to {
    opacity: 1;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet"/>
<ul>
  <li><img src="http://placehold.it/400?text=1" /></li>
  <li><img src="http://placehold.it/400?text=2" /></li>
  <li><img src="http://placehold.it/400?text=3" /></li>
  <li><img src="http://placehold.it/400?text=4" /></li>
  <li><img src="http://placehold.it/400?text=5" /></li>
  <li><img src="http://placehold.it/400?text=6" /></li>
  <li><img src="http://placehold.it/400?text=7" /></li>
  <li><img src="http://placehold.it/400?text=8" /></li>
</ul>

以下是Codepen上的相同演示。

Answer 2

我的建议是逐渐为每个img（我的例子中的div）添加一个动画延迟。 div以opacity:0;开头，在这种情况下附加在一个类中，然后我们需要一些JavaScript来在动画结束后删除该不透明度属性。

$('div').on('animationend', function() {
  $(this).removeClass('initial');
})

.initial {
  opacity: 0;
}

div {
  width: 100px;
  height: 100px;
  background: pink;
  border: 1px solid;
  float: left;
  animation: fadein 6s;
  -moz-animation: fadein 6s;
  /* Firefox */
  -webkit-animation: fadein 6s;
  /* Safari and Chrome */
  -o-animation: fadein 6s;
  /* Opera */
}

div:nth-child(1) {
  animation-delay: 0s;
}

div:nth-child(2) {
  animation-delay: 6s;
}

div:nth-child(3) {
  animation-delay: 12s;
}

div:nth-child(4) {
  animation-delay: 18s;
}

@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;
  }
}

<div class="initial"></div>
<div class="initial"></div>
<div class="initial"></div>
<div class="initial"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

2 个答案: