Как сделать бесконечную анимацию вертикальных линий, движущихся по горизонтальным линиям ⇐ CSS

[Anonymous]

Как сделать бесконечную анимацию вертикальных линий, движущихся вдоль горизонтальных, используя только CSS и HTML?
введите здесь описание изображения
Пока у меня есть только этот вариант, но расстояние между строками не уменьшается по мере приближения линий слева к центру и справа к центру, эффекта удаления в глубину нет

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

.animation-container {
position: absolute;
top: 0;
height: 100%;
overflow: hidden;
pointer-events: none;
}

.animation-container.left {
left: 0;
width: 50%;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.5) 2px, transparent 2px);
background-size: 58px 100%;
clip-path: polygon(0 0, 100% 30%, 100% 70%, 0% 100%);
animation: moveLeftToCenter 20s linear infinite;
}

.animation-container.right {
right: 0;
width: 50%;
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.5) 2px, transparent 2px);
background-size: 58px 100%;
clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 70%);
animation: moveRightToCenter 20s linear infinite;
}

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

Может быть, кто-нибудь знает, как это сделать? Введите сюда описание изображения

Подробнее здесь: https://stackoverflow.com/questions/791 ... ntal-lines