CSS3 Marquee Effekt, ohne den leeren Raum

Question

Diese Frage hier eine Antwort hat, die am Ende jeder Iteration des Zeltes viel leeren Raum verlässt: CSS3 Marquee Effect

Gibt es eine Möglichkeit, eine glatte <marquee></marquee> Wirkung zu erzielen, mit CSS3, die diesen Raum nicht verlassen?

Ich habe viele kleine Elemente, die ein wenig wie die blauen Tags von SO aussehen und ausschließlich den Inhalt des Lauftextes ausfüllen, im Gegensatz zu einem fortlaufenden Text oder einer Textwand. Hier

Answer 1

ist ein Beispiel, wie Sie tun können, und durch die Verzögerung einstellen und Dauer Sie den Raum zwischen den Texten zu steuern

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