Marquee не прокручивает все ⇐ CSS

[Anonymous]

У меня есть клиент, который использует область выделения, я знаю, я знаю, что это устаревший тег, и, честно говоря, его не следует использовать. Это его личный веб-сайт, и он какое-то время был моим клиентом, поэтому я решил реализовать выделение, но сделать это современным способом, без использования устаревших тегов. Я видел много разных решений для этого. Обычно я использую flexbox для чего-то подобного, потому что он не зависит от javascript или jQuery, но примеры выделения flexbox часто полагаются на жестко запрограммированную ширину для расчета скорости анимации ключевых кадров.
Короче говоря, я пытаюсь создать адаптивную область, но скорость не меняется в зависимости от того, сколько контента она прокручивает (я знаю, что об этом нужно много спрашивать). Мой клиент также пишет массу контента (я пытался убедить его в обратном, но он все равно это делает).
Я собрал кое-что, что очень близко к решению. Он не использует flexbox, но хорошо меняет размер, не меняя скорость... Я уже довольно близок к тому, что мне нужно. В конце концов, мне не нужно использовать flexbox, поэтому, если все остальные флажки отмечены, меня это устраивает!
Вот код, который я использую:

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

Start Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut sed placeat aperiam quod nostrum itaque blanditiis soluta! Aliquid fuga molestias aut magni, pariatur doloremque, voluptas ipsa nobis ipsum voluptatibus end. Start Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut sed placeat aperiam quod nostrum itaque blanditiis soluta! Aliquid fuga molestias aut magni, pariatur doloremque, voluptas ipsa nobis ipsum voluptatibus end. Start Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut sed placeat aperiam quod nostrum itaque blanditiis soluta! Aliquid fuga molestias aut magni, pariatur doloremque, voluptas ipsa nobis ipsum voluptatibus end..

CSS:

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

.green {
color: green;
}

.red {
color: red;
}

.blue {
color: blue;
}

.pizza {
line-height: 60px;
font-size: 16px;
overflow: hidden;
position: relative;
white-space: nowrap;
}

p.duck {
animation: scroll-left 20s linear infinite;
}

@keyframes scroll-left {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}

p.duck:hover {
animation-play-state: paused;
}

Скрипка: https://jsfiddle.net/L7kbhyg6/
Я добавил несколько интервалов, чтобы проблему было легче увидеть, но в основном не все часть текста прокручивается. Я вижу красный, затем зеленый, затем шатер подпрыгивает и все начинается заново. Не знаю, как заставить его отображать весь мой контент.
Спасибо,

Джош

Подробнее здесь: https://stackoverflow.com/questions/786 ... everything