CSS - Text von links nach rechts verschieben

Question

Ich möchte eine animierte HTML-"Markise" erstellen, die auf einer Website hin und her rollt:

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

und dem CSS:

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

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

Das Problem ist, dass das Rechteck nicht aufhört, wenn es den rechten Rand des Bildschirms erreicht; es bewegt sich ganz aus dem Bildschirm heraus (wodurch kurz eine horizontale Bildlaufleiste erscheint) und kommt dann wieder zurück.

Wie kann ich also erreichen, dass der Rahmen anhält, wenn sein rechter Rand den rechten Rand des Bildschirms erreicht?

EDIT: Merkwürdigerweise funktioniert das nicht:

50% {right: 0%}

Answer 1

Ich bin nicht sicher, ob dies die richtige Lösung ist, aber ich habe Folgendes erreicht indem ich die Klasse .marquee direkt nach dem Animation-CSS neu definiert habe.

Siehe unten:

<style>
#marquee-wrapper{
    width:700px;
    display:block;
    border:1px solid red;
}

div.marquee{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
}

@-moz-keyframes myfirst /* Firefox */{
0%   {background:red; left:0px; top:0px;}
100% {background:red; left:100%; top:0px}
}
div.marquee{ 
left:700px; top:0px
}
</style>

<!-- HTMl COde -->

<p><b>Note:</b> This example does not work in Internet Explorer and Opera.</p>
<div id="marquee-wrapper">
<div class="marquee"></div>