Странное поведение бесконечной карусели при движении быстрее ⇐ CSS

[Anonymous]

Я хочу сделать что-то вроде бесконечной карусели с «движущимся кругом». Это работает, но я хочу, чтобы круги двигались быстрее, когда я навожу курсор на левое поле. Это тоже работает, но у него странное поведение: похоже, есть еще одна линия кругов, которые все время движутся быстрее, и та, которая движется нормально, и когда я навожу курсор на поле, «нормальные» круги невидимы, а более быстрые -движущиеся видны, а когда я выдвигаюсь, все наоборот.
(Надеюсь, вы, ребята, понимаете, о чем я.)
Мне бы хотелось, чтобы круги двигались быстрее, когда я наведите курсор на поле, но без этого странного поведения.
При наведении курсора на левое поле круги движутся быстрее, но не так, как ожидалось.

Код: Выделить всё

var left = document.querySelector(".left");
var one = document.querySelector("#one");
var two = document.querySelector("#two");

left.addEventListener("mouseover", () => {
one.style.animationDuration = "10s";
two.style.animationDuration = "10s";
})

left.addEventListener("mouseout", () => {
one.style.animationDuration = "30s";
two.style.animationDuration = "30s";
})

Код: Выделить всё

@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.left {
position: absolute;
top: 0;
left: 0;
width: 250px;
height: 100%;
background: linear-gradient(to left, rgba(255, 255, 255, 0), #f80606);
z-index: 10;
}

.moving-circles {
overflow: hidden;
margin: 24px -128px;
padding: 24px 0;
white-space: nowrap;
background: #fff;
position: relative;
}

.first-row {
display: inline-block;
animation: 30s slide infinite linear;
}

.first-row a {
margin: 0 4px;
text-decoration: none;
}

.first-row span {
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 40px;
height: 120px;
width: 120px;
border-radius: 1000px;
border: 1px solid #000;
margin: 0 40px;
}

Код: Выделить всё

[url=#]
0
[/url]
[url=#]
1
[/url]
[url=#]
2
[/url]
[url=#]
3
[/url]
[url=#]
4
[/url]
[url=#]
5
[/url]
[url=#]
6
[/url]
[url=#]
7
[/url]
[url=#]
8
[/url]
[url=#]
9
[/url]

[url=#]
0
[/url]
[url=#]
1
[/url]
[url=#]
2
[/url]
[url=#]
3
[/url]
[url=#]
4
[/url]
[url=#]
5
[/url]
[url=#]
6
[/url]
[url=#]
7
[/url]
[url=#]
8
[/url]
[url=#]
9
[/url]

Подробнее здесь: https://stackoverflow.com/questions/787 ... ing-faster