CSS: creare animazioni in sequenza

Per creare animazioni CSS in sequenza occorre aggiungere un ritardo tra un'animazione e l'altra.

Il codice è molto semplice:

#list li {
  animation: fadeIn 1s ease-in both;
}

#list li:nth-child(2) {
	animation-delay: 1s;
}
#list li:nth-child(3) {
	animation-delay: 2s;
}
#list li:nth-child(4) {
	animation-delay: 3s;
}
#list li:nth-child(5) {
	animation-delay: 4s;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translate3d(0, -20%, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

Ciascuna animazione dura 1 secondo ma su ogni elemento è stato specificato un ritardo (delay) progressivo.

Demo e codice

CSS: animazioni in sequenza