I'm trying to create a CSS animation that is sort of like a conveyor belt loop. What i mean is when the text in a div go off screen to the right, it should come back in from the left.
Here's what I've tried so far to mimic the effect.
.marquee-section {
position: relative;
min-height: 82px;
}
.marquee-section, .marquee-section * {
overflow: hidden;
}
.marquee {
white-space: nowrap;
}
.marquee-div {
position: absolute;
left: -100%;
animation: move linear 12.5s infinite;
min-width: 100%;
}
@keyframes move {
from { left: -100%; }
to { left: 100%; }<div class="marquee-section">
<div class="marquee-div">
<div class="marquee">START • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • END</div>
</div>
</div>But I can only get the text to start from the left again after it disappears offscreen to the right completely. As a result, there is white space preceding and following the text as it moves to the right.
What I want to achieve is to not have any white space and instead have text on the left of the starting point as well as on the right of the ending point as the text moves to the right. This is something that I have seen quite a bit on Webflow, and this example demonstrates what I'm trying to do.
Can this be achieved with CSS only? Or are there any frameworks that facilitate this kind of animation?
I'd really appreciate some suggestions on this.
