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秒延遲。第三，6秒延遲，依此類推。這個時間來自3秒的animation-duration。第一張圖像淡入後，第二張將淡入。第二張淡入後，第三張將淡入等等。

未知圖像數量？

如果圖片的數量未知，這種方法仍然可以使用，儘管這意味着會創建一些永遠不會使用的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）增加一個動畫延遲。 divs以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>