CSS-перемещение текста слева направо.

Я хочу создать анимированный HTML-шаблон, который прокручивается назад и вперед на веб-сайте:

<div class="marquee">This is a marquee!</div>

и CSS:

.marquee {
    position: absolute;
    white-space: nowrap;
    -webkit-animation: rightThenLeft 4s linear;
}

@-webkit-keyframes rightThenLeft {
    0%   {left: 0%;}
    50%  {left: 100%;}
    100% {left: 0%;}
}

Проблема в том, что бегущая строка не останавливается, когда достигает нужного места. -ручной край экрана; он перемещается полностью за пределы экрана (на короткое время появляется горизонтальная полоса прокрутки), а затем возвращается.

Итак, как сделать, чтобы бегущее окно останавливалось, когда его правый край достигает правого края экрана?

РЕДАКТИРОВАТЬ: Как ни странно, это не работает:

50% {right: 0%}