CSS-moving text from left to right

tanis.control picture tanis.control · May 21, 2012 · Viewed 107.3k times · Source

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

Answer

Timur Gafforov picture Timur Gafforov · Feb 19, 2013

You could simply use CSS animated text generator. There are pre-created templates already