Site URL: https://coyote-coconut-z39a.squarespace.com/about
Right now, the scroll bar on my about page (site is here. Password to view is Hello2021) has blank space after the string of text, before it starts it's next rotation. How can I make it so the text is always visible and scrolling, with no blank space? The code I'm currently using is below.
<div class="scroll">BOOK NOW • BOOK NOW • BOOK NOW • BOOK NOW • BOOK NOW • BOOK NOW • BOOK NOW • BOOK NOW • BOOK NOW • BOOK NOW • BOOK NOW • BOOK NOW</div>
.scroll{ overflow: hidden!important;
position: relative!important;
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
-moz-animation: scroll 15s linear infinite;
-webkit-animation: scroll 15s linear infinite;
animation: scroll 15s linear infinite;}
@-moz-keyframes scroll {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
#page {overflow-x:hidden}