You can run one animation after another using animation-delay, like so:

.sequenced-thing {
  animation: 
    sequence1 1s 2,
    sequence2 3s 1s 1 forwards;
}

As seen in this example:

See the Pen From walk to run by Rachel Nabors (@rachelnabors) on CodePen.

Note the importance of fill-mode: forwards

Exercise: Sitting Tuna Down

Using animation-delay, start a sitting animation after the walking animation.

See the Pen DIY Cat walk + sit by Rachel Nabors, Teaching (@rachelnabors-teaching) on CodePen.

Solution