CSS Animation - Let images fade in one after another

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.



and so on, and so on...

All solutions are welcome (pure css solution would be great tho), thank you for reading!

Brett DeWoody · Accepted Answer

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

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;
  }
}
```
```
  
  
  
  
  
  
  
  
```
Here's the same demo on Codepen.

CSS Animation - Let images fade in one after another

Answers (2)

Related Questions