Как обеспечить бесперебойную работу фоновой анимации при переходе между страницами с помощью Astro.js? ⇐ CSS

[Anonymous]

У меня запущена фоновая анимация, и код выглядит примерно так:

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

body {
background-image:
url("../assets/asset1.webp"), url("../assets/asset2.webp"),
url("../assets/asset3.webp");
background-size: 1000px;
background-color: rgba(0, 0, 0);
animation: background-animation 500s linear infinite;
}

@keyframes background-animation {
from {
background-position: 0, 0, 0;
}
to {
background-position: 30000px, 10000px, 15000px;
}
}

Это просто несколько изображений, медленно перемещающихся в фоновом режиме, и как только я перехожу с одной страницы на другую, они явно сбрасываются. Я хотел сделать анимацию непрерывной между страницами.
Я использую Astro.js, и есть этот прослушиватель событий загрузки страницы, связанный с переходами просмотра, в котором я реализую логику локального хранилища и задерживаю анимацию ровно на достаточное количество:

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

  document.addEventListener("astro:page-load", () => {
if (!localStorage.animationTimePassed) {
localStorage.animationTimePassed = Date.now();
}
const timePassed = (Date.now() - localStorage.animationTimePassed) / 1000;
document.body.style.animationDelay = `-${timePassed}s`;
});

Все это работает нормально, но при переходе на другую страницу наблюдается небольшое подтормаживание. Обычно оно зависает на миллисекунду, а затем продолжается.
Как сделать это заикание менее заметным?

Подробнее здесь: https://stackoverflow.com/questions/798 ... ng-between