I want to create an animated HTML "marquee" that scrolls back and forth on a website:
<div class="marquee">This is a marquee!</div>
and the CSS:
.marquee {
position: absolute;
white-space: nowrap;
-webkit-animation: rightThenLeft 4s linear;
}
@-webkit-keyframes rightThenLeft {
0% {left: 0%;}
50% {left: 100%;}
100% {left: 0%;}
}
The problem is, the marquee doesn't stop when it reaches the right-hand edge of the screen; it moves all the way off the screen (making a horizontal scroll bar appear, briefly) and then comes back.
So, how do I make the marquee stop when its right-hand edge reaches the right-hand edge of the screen?
EDIT: Oddly, this does not work:
50% {right: 0%}
Somehow I got it to work by using margin-right, and setting it to move from right to left. http://jsfiddle.net/gXdMc/
Don't know why for this case, margin-right 100% doesn't go off the screen. :D (tested on chrome 18)
EDIT: now left to right works too http://jsfiddle.net/6LhvL/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With