Pure CSS Continuous Horizontal Text Scroll Without Break
Solution 1:
You could try having two marquees and set one of them with a delayed animation of 2.5s which is half the time of the full animation (5s).
.marquee {
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
position: absolute;
}
.marquee span {
display: inline-block;
padding-left: 100%;
animation: marquee 5s linear infinite;
}
.marquee2 span {
animation-delay: 2.5s;
}
@keyframes marquee {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}<p class="marquee">
<span>This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - </span>
</p>
<p class="marquee marquee2">
<span>This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - </span>
</p>Solution 2:
This is similar to above answer. I have taken it from the official website of Next.js. They have used this with SVGs to make a slider to show which popular companies are using their framework.
.wrapper {
max-width: 100%;
overflow: hidden;
}
.marquee {
white-space: nowrap;
overflow: hidden;
display: inline-block;
animation: marquee 10s linear infinite;
}
.marquee p {
display: inline-block;
}
@keyframes marquee {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-50%, 0, 0);
}
}<div class="wrapper">
<div class="marquee">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce volutpat, ante eu bibendum tincidunt, sem lacus vehicula augue, ut suscipit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce volutpat, ante eu bibendum tincidunt, sem lacus vehicula augue, ut suscipit.
</p>
</div>
</div>