Interactive online courses HTML Academy
2026-03-09 14:08 Diff
https://htmlacademy.org/courses/dynamic/animations/complex-animation-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.