CSS-moving text from left to right

Question

I want to create an animated HTML "marquee" that scrolls back and forth on a website: ```

This is a marquee!

``` 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%} ```

Accepted Answer

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/

CSS-moving text from left to right

Solution

Problem