CSS: creare una coda di animazioni

Concatenare le animazioni CSS in una coda è semplice. Possiamo usare una specifica proprietà CSS.

La proprietà è animation-delay. Questa proprietà ritarda l'esecuzione di un'animazione. Quindi se abbiamo due animazioni in cui la prima dura un secondo, possiamo usare questa proprietà sulla seconda animazione specificando un secondo come valore.

@keyframes first {
	from {
		left: 0;
	}	
	to {
		left: 100px;
	}
}

@keyframes second {
	from {
		left: 0;
	}	
	to {
		left: 200px;
	}
}

#first,
#second {
	position: relative;
}

#first {
	animation: first 1s linear both;
}

#second {
	animation: second 1s linear 1s both; /* Ritardo di 1 secondo */
}

La proprietà animation-delay viene subito dopo animation-timing-function nella sintassi abbreviata.

Demo

Chaining CSS animations: site preloader