Complex animation, step 2

Let’s see how we can assign a second concurrent animation to an element.

Let’s assume we have two animations:

@keyframes move {
  to { left: 100px; }
}
@keyframes stretch {
  to { width: 100px; }
}

To assign a second animation to an element, you need to add its name and duration, separated by a comma, to the animation-name and animation-duration properties. Like this:

.element {
  animation-name: move, stretch;
  animation-duration: 5s, 5s;
}

In this example, two animations will start simultaneously, the element will move and stretch at the same time for 5 seconds.

Multiple animations are set in the same way as multiple backgrounds and shadows by listing the properties separated by a comma.

Let’s add another animation to the element from the previous step.