Infinite Scrolling Block Text

HTML

<div class="scroll-container">
  <div class="scroll-text"><span class="wt-btn_sign-bound"><span data-width="#fff" data-text="BVLOS HUB"> BVLOS HUB</span></span></div>
</div>

CSS

.scroll-container {
    overflow: hidden;
    width: max-content;
    position: absolute;
    z-index: 0;
    margin-top: -200px;
}

.scroll-container::before {
    background: linear-gradient(270deg,transparent , black );
    width: 16%;
    height: 100%;
    content: "";
    top: 0px;
    left: 0px;
    position: absolute;
    z-index: 1;
}

.scroll-container::after {
    background: linear-gradient(90deg,transparent , black );
    width: 16%;
    height: 100%;
    content: "";
    top: 0px;
    right: 0px;
    position: absolute;
}

.wt-btn_sign-bound {
    display: block;
    overflow: hidden;
    width: 100%;
}

.wt-btn_sign-bound span {
    position: relative;
    display: inline-block;
    padding: 0 21px;
    -webkit-animation: wt-btn_sign-marquee 120s linear infinite;
    -moz-animation: wt-btn_sign-marquee 120s linear infinite;
    -o-animation: wt-btn_sign-marquee 120s linear infinite;
    animation: wt-btn_sign-marquee 120s linear infinite;
}

.wt-btn_sign-bound span:after {
    content: attr(data-text);
    position: absolute;
    left: 100%;
    padding: 0 21px;
}