Sun, 2019-12-01 18:03
Hi all, I have the following code to create a scrolling text box on one of my site pages:
/* scroll-left */ .scroll-left { height: 50px; overflow: hidden; position: relative; background: whitesmoke; color: blue; border: 1px solid black; } .scroll-left p { position: absolute; width: auto; height: 100%; margin: 0; line-height: 50px; text-align: center; white-space:nowrap; /* Starting position */ -moz-transform:translateX(100%); -webkit-transform:translateX(100%); transform:translateX(100%); /* Apply animation to this element */ -moz-animation: scroll-left 60s linear infinite; -webkit-animation: scroll-left 60s linear infinite; animation: scroll-left 60s linear infinite; } /* Move it (define the animation) */ @-moz-keyframes scroll-left { 0% { -moz-transform: translateX(100%); } 100% { -moz-transform: translateX(-100%); } } @-webkit-keyframes scroll-left { 0% { -webkit-transform: translateX(100%); } 100% { -webkit-transform: translateX(-100%); } } @keyframes scroll-left { 0% { -moz-transform: translateX(100%); /* Browser bug fix */ -webkit-transform: translateX(100%); /* Browser bug fix */ transform: translateX(100%); } 100% { -moz-transform: translateX(-100%); /* Browser bug fix */ -webkit-transform: translateX(-100%); /* Browser bug fix */ transform: translateX(-100%); } }
Here it is on the page (the box is just below the audio sample)
https://dsbaudio.com/four-a-novella-by-p-j-blakey-novis/
Can anyone tell me why the text takes so long to appear?
Comment
Share