markquee reading line

Source:

Демо:

Плагины:

Подключение:

//

Разметка:

//

<div class="read-line">
    <span class="read-line__item"
        >вид из окна&nbsp;<span>/&nbsp;</span></span
    >
    <span class="read-line__item"
        >вид из окна&nbsp;<span>/&nbsp;</span></span
    >
    <span class="read-line__item"
        >вид из окна&nbsp;<span>/&nbsp;</span></span
    >
</div>

Стили:

//

.read-line {
    display: flex;
    white-space: nowrap;

    &__item {
        animation: read-line 10s linear infinite;
        span {
            font-size: 0.8em;
        }
    }
}

@keyframes read-line {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}

Инициализация:

//