Не допускайте опорожнения контейнера до появления первой коробки ⇐ CSS

[Anonymous]

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

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

.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; }

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

Box 1
Box 2
Box 3
Box 4

Как изменить эту настройку, чтобы первое поле было сразу видно при загрузке страницы, а анимация начинала вращаться, не показывая пустой контейнер в начале?

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