HTML
<div class="text-caruisel">
<div class="text-caruisel--cont">
<span data-text="We are trusted by over 25,000 clients across the world to power stunning websites.">We are trusted by over 25,000 clients across the world to power stunning websites.</span>
</div>
</div>
LESS
.text-caruisel{
overflow: hidden;
pointer-events: none;
margin-top: 70px;
.text-caruisel--cont{
position: relative;
float: left;
z-index: 0;
pointer-events: none;
}
span{
display: block;
font-size: 100px;
font-weight: 600;
animation: content-marquee 15s infinite linear;
white-space: nowrap;
padding-left: 2vw;
@keyframes content-marquee {
0% {
transform: translateX(0)
}
100% {
transform: translateX(-50%)
}
}
&::after{
content: attr(data-text);
padding-left: 2vw;
}
}
}