CSS3 Marquee эффект, без пустого пространства

Question

Этого вопроса здесь есть ответ, который оставляет много пустого пространства в конце каждой итерации шатра: CSS3 Marquee Effect

Есть ли способ, чтобы добиться плавного <marquee></marquee> эффекта, используя CSS3, который не покидает это пространство?

У меня есть много маленьких элементов, которые немного похожи на синие теги SO, которые исключительно заполняют содержимое шатра, в отличие от одного сплошного тела или стены текста.

Answer 1

Вот пример, как это можно сделать, и установив задержку и продолжительность вы контролируете пространство между текстами

.marquee { 
 
    background-color: #ddd; 
 
    width: 500px; 
 
    margin: 0 auto; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
} 
 
.marquee span { 
 
    display: inline-block; 
 
    font-size: 20px; 
 
    position: relative; 
 
    left: 100%; 
 
    animation: marquee 8s linear infinite; 
 
} 
 
.marquee:hover span { 
 
    animation-play-state: paused; 
 
} 
 

 
.marquee span:nth-child(1) { 
 
    animation-delay: 0s; 
 
} 
 
.marquee span:nth-child(2) { 
 
    animation-delay: 0.8s; 
 
} 
 
.marquee span:nth-child(3) { 
 
    animation-delay: 1.6s; 
 
} 
 
.marquee span:nth-child(4) { 
 
    animation-delay: 2.4s; 
 
} 
 
.marquee span:nth-child(5) { 
 
    animation-delay: 3.2s; 
 
} 
 

 
@keyframes marquee { 
 
    0% { left: 100%; } 
 
    100% { left: -100%; } 
 
}

<p class="marquee"> 
 
    <span>this is a</span> 
 
    <span>simple marquee</span> 
 
    <span>using css</span> 
 
    <span>only tech</span> 
 
    <span>with a delay</span> 
 
</p>