Paradoxically, delaying elements so that they appear one after another can make a web page feel faster: visitors gain the impression that a site delivers a "smoother" experience by interacting with transitioned elements.

Before creating this effect, we should prepare our markup. In the example above, I have a series of photographs inside a div:

<div id="fds">
	<img src="tuwanek-sunshine-coast-bc.jpg" alt="Tuwanek Sunshine Coast">
	<img src="hornby-island-shoreline.jpg" alt="Hornby Island shoreline">
	<img src="mt-baker-washington.jpg" alt="Mt Baker, Washington">
	<img src="nelson-bridge.jpg" alt="Nelson Bridge, Vancouver">
	<img src="golden-skies-victoria.jpg" alt="Golden skies, Victoria">
	<img src="first-beach-vancouver.jpg" alt="First beach, Vancouver">
</div>

The base CSS is very simple:

#fds {
	font-size: 0;
}
#fds img {
	width: 33.33%; 
	opacity: 0;
}

(Note the use of font-size: 0 to eliminate every last little extra space inside the <div>).

Creating a presentation sequence with pure CSS

A sequential fade-in sequence can be created with a keyframe animation and the CSS animation-delay property. You’d typically call on the animation using incrementally greater delay values for each element. (Note that I’ve removed vendor prefixes to keep the code simple).

@keyframes fdsseq { 
	100% { opacity: 1; }
}
#fds img {
	animation: fdsseq .5s forwards;
}
#fds img:nth-child(1) {
	animation-delay: .5s;
}
#fds img:nth-child(2) {
	animation-delay: 1s;
}
#fds img:nth-child(3) {
	animation-delay: 1.5s;
}
…

While this approach works, it has a few disadvantages.

Encountering The Limitations of CSS

The pure CSS approach makes it difficult to change the timing of the animation for several reasons:

1. Altering the delay value for an element at the beginning will force you to rewrite the style declarations for subsequent elements.
2. The CSS also does not scale well: the more images you add, the more lines of code you have to write.
3. There is no incremental delay property for CSS; nor can we depend on element loading to display elements in sequence: bandwidth, load order prioritization and connection speeds vary far too much to create a reliable experience.

Right now, the best method to use if you have more than a few elements to fade in is to implement the presentation with JavaScript.

Make An Inviting Animation

The image transition sequence every time the page is loaded or replaced. For that reason, it is important that you make the presentation complete as quickly as possible, taking no more than a few seconds to fade in all the images. While a slow, graceful introduction may look great to you, it will only serve to annoy and frustrate your visitors.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/doJJbp