Creating an animation chain with CSS is rather simple. We can do this by using a specific CSS property.
The CSS property is animation-delay. This property simply delays the execution of an animation by a specific amount of time. So if we have two animations where the first one takes one second to complete its task, we can create a chain by using the aforementioned property on the second animation as follows:
@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; /* 1 second delay */
}
The animation-delay property comes immediately after the animation-timing-function in the shorthand notation. Here's a more complex example: