CSS Animation - Let images fade in one after another - html

Question

I have a row of pictures where I want to fade in one image after another.
.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;
}
}
This code let's all images fade in at the same time.
I'm using typo3 with a template, the html structure is a bit complicated because of this - I'm sorry.
<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">
and so on, and so on...
All solutions are welcome (pure css solution would be great tho), thank you for reading!

Answer 1

Here's a CSS-only solution using an approach similar to what you're starting with. I've simplified the HTML and CSS to focus on the important parts.
The General Idea
Layout your images as you desire. In this case I've used a <ul> element with <li> elements to hold the images, and laid them out horizontally.
Add a fadeIn animation to the images.
Now here's the key, add a animation-delay for each image, dependent on it's number in the lineup. The first will have no delay. The 2nd, a 3 second delay. The 3rd, a 6 second delay, and so on. This timing comes from the animation-duration of 3s. After the first image has faded in, the 2nd will fade in. After the 2nd has faded in, the 3rd will fade in, etc, etc.
Unknown Number of Images?
If the number of images is unknown this approach can still be used, though it will mean creating a few CSS styles that may never be used. You'll need to create:
li:nth-child(N) > img {
animation-delay: [animation-duration * N]s;
}
for the maximum number of images you think you'll have. So if you might have 100 images, and the animation-duration is set to 3s, you'll create 100 of those snippets, all the way through:
li:nth-child(100) > img {
animation-delay: 300s;
}
Demo
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>
Here's the same demo on Codepen.

Answer 2

My proposal is to add an animation delay to every img (div in my example) increasingly. divs start with opacity:0; , attached in a class in this case, then we need some JavaScript to remove that opacity property once the animation has finished.
$('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>