Мгновенная видимость контента во вращающейся анимации с помощью Elementor Pro ⇐ CSS

[Anonymous]

Я работаю с Elementor Pro и пытаюсь создать плавную непрерывную анимацию, которая вращается в нескольких текстовых или графических полях на экране.
Моя структура включает в себя:

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

.moving-boxes-parent {
position: relative;
overflow: hidden;
width: 100%;
height: 80px;
margin-top: 0;
}
.moving-box {
position: absolute;
width: 100%;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
top: 50%;
transform: translateY(-50%);
animation: box_move 24s linear infinite;
opacity: 0;
overflow: hidden;
}

.moving-box:nth-child(1) {
animation-delay: 0s;
opacity: 1;
}
@keyframes box_move {
0% {
transform: translate3d(100%, -50%, 0);
opacity: 1;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translate3d(-100%, -50%, 0);
opacity: 0;
}
}

.moving-box:nth-child(1) { animation-delay: 0s; }
.moving-box:nth-child(2) { animation-delay: 6s; }
.moving-box:nth-child(3) { animation-delay: 12s; }
.moving-box:nth-child(4) { animation-delay: 18s; }

Один основной контейнер с классом .moving-boxes-parent
Внутри него 4 дочерних контейнера, каждый с классом .moving-box
Анимация в целом работает хорошо: ящики последовательно входят справа и выходят слева. Однако есть одна проблема: при первой загрузке страницы экран ненадолго пустует, а затем с задержкой появляется первый .moving-box. Это приводит к тому, что изначально отображается пустое поле, что не идеально для пользователя.
Я хочу, чтобы все поля были видны на экране с момента загрузки страницы и начиналось только их движение (анимация вращения). Другими словами, контент уже должен присутствовать, и анимация должна просто начать его перемещать — без каких-либо задержек или начального пустого состояния.

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