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.