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

Irgendwie habe ich es hinbekommen, indem ich margin-right verwendet und eingestellt habe, dass es sich von rechts nach links bewegt. http://jsfiddle.net/gXdMc/

Ich weiß nicht, warum in diesem Fall margin-right 100% den Bildschirm nicht verlässt :D (getestet mit Chrome 18)

EDIT: jetzt funktioniert auch von links nach rechts http://jsfiddle.net/6LhvL/

Answer 2

Sie könnten einfach Folgendes verwenden CSS-Generator für animierten Text . Es gibt bereits vorgefertigte Vorlagen

Answer 3

Hallo, Sie können Ihr Ergebnis mit der Verwendung von <marquee behavior="alternate"></marquee>

HTML

<div class="wrapper">
<marquee behavior="alternate"><span class="marquee">This is a marquee!</span></marquee>
</div>

CSS

.wrapper{
    max-width: 400px;
    background: green;
    height: 40px;
    text-align: right;
}

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

siehe die Demo:- http://jsfiddle.net/gXdMc/6/

Answer 4

Ich verwende gerne die folgenden Methoden, um zu verhindern, dass Dinge außerhalb meiner div Elemente. Es hilft auch bei CSS-Rollovers.

.marquee{
    overflow:hidden;
}

Dadurch wird alles ausgeblendet, was sich außerhalb des Divs bewegt, wodurch verhindert wird, dass sich der Browser erweitert und eine Bildlaufleiste erscheint.

Answer 5

Wenn ich Ihre Frage richtig verstehe, könnten Sie einen Wrapper um Ihr Marquee erstellen und dann eine width (ou max-width ) an das umhüllende Element. Zum Beispiel:

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

Und dann #marquee-wrapper { width: x } .