0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>Let’s see how we can assign a second concurrent animation to an element.</p>
1
<p>Let’s see how we can assign a second concurrent animation to an element.</p>
2
<p>Let’s assume we have two animations:</p>
2
<p>Let’s assume we have two animations:</p>
3
@keyframes move { to { left: 100px; } } @keyframes stretch { to { width: 100px; } }<p>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:</p>
3
@keyframes move { to { left: 100px; } } @keyframes stretch { to { width: 100px; } }<p>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:</p>
4
.element { animation-name: move, stretch; animation-duration: 5s, 5s; }<p>In this example, two animations will start simultaneously, the element will move and stretch at the same time for 5 seconds.</p>
4
.element { animation-name: move, stretch; animation-duration: 5s, 5s; }<p>In this example, two animations will start simultaneously, the element will move and stretch at the same time for 5 seconds.</p>
5
<p>Multiple animations are set in the same way as multiple backgrounds and shadows by listing the properties separated by a comma.</p>
5
<p>Multiple animations are set in the same way as multiple backgrounds and shadows by listing the properties separated by a comma.</p>
6
<p>Let’s add another animation to the element from the<a>previous step</a>.</p>
6
<p>Let’s add another animation to the element from the<a>previous step</a>.</p>