Как исправить дрожание анимации в сложной веб-анимации CSS и JS? ⇐ CSS

[Anonymous]

Я работаю над сложной анимацией для веб-сайта нашей компании, но столкнулся с проблемой, которую не могу решить. Анимация включает в себя комбинацию переходов CSS и JavaScript для управления различными интерактивными элементами. При запуске анимации она не выглядит плавной и имеет заметное дрожание, особенно на медленных устройствах.
Вот упрощенная версия моего кода:
HTML:

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

CSS:

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

#animatedContainer {
width: 100%;
height: 100vh;
overflow: hidden;
position: relative;
}

.movingBox {
width: 50px;
height: 50px;
background-color: #3498db;
position: absolute;
animation: moveBox 5s infinite alternate;
}

@keyframes moveBox {
0% {
left: 0;
top: 0;
transform: scale(1);
}
50% {
left: 50%;
top: 50%;
transform: scale(1.5);
}
100% {
left: 100%;
top: 100%;
transform: scale(1);
}
}

JS:

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

document.addEventListener("DOMContentLoaded", function() {
const container = document.getElementById("animatedContainer");
const box = document.querySelector(".movingBox");

container.addEventListener("mouseover", () => {
box.style.animationPlayState = 'paused';
});

container.addEventListener("mouseout", () => {
box.style.animationPlayState = 'running';
});

// Additional JavaScript to control animation with more complex logic
let animationRunning = true;

function toggleAnimation() {
if (animationRunning) {
box.style.animation = 'none';
animationRunning = false;
} else {
box.style.animation = 'moveBox 5s infinite alternate';
animationRunning = true;
}
}

document.addEventListener("click", toggleAnimation);
});

Я пробовал настраивать ключевые кадры, продолжительность анимации и даже разбивать анимацию на более мелкие части, но дрожание сохраняется. Может ли это быть проблема с моими прослушивателями событий JavaScript или с тем, как обрабатываются анимации CSS?

Подробнее здесь: https://stackoverflow.com/questions/786 ... -animation