CSS-pasar el texto de izquierda a derecha

Question

quiero crear un archivo HTML de animación "carpa" que se desplaza hacia atrás y adelante en un sitio web:

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

y el CSS:

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

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

El problema es decir, la marquesina no se detiene cuando alcanza el borde derecho de la pantalla; se mueve completamente fuera de la pantalla (haciendo que aparezca una barra de desplazamiento horizontal, brevemente) y luego vuelve.

Entonces, ¿cómo hago que la marquesina se detenga cuando su borde derecho llega al borde derecho de la pantalla?

EDIT: Curiosamente, esto no funciona:

50% {right: 0%} 

Answer 1

De alguna manera tengo que trabajar utilizando margen derecha, y se establece a moverse de derecha a izquierda. http://jsfiddle.net/gXdMc/

No sé por qué en este caso, el margen derecho 100% no desaparece de la pantalla. : D (probado en cromo 18)

EDIT: ahora izquierda a derecha también funciona http://jsfiddle.net/6LhvL/

Answer 2

Si entiendo que pregunta correctamente, podría crear una envoltura alrededor de su marco y luego asignar un width (o max-width) para el elemento de envoltura. Por ejemplo:

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

Y luego #marquee-wrapper { width: x }.

Answer 3

No estoy seguro de si esta es la solución correcta, pero he logrado este redefiniendo la clase .marquee justo después de la animación CSS.

Comprobar a continuación:

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

Answer 4

Hola se puede lograr el resultado con el uso de <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; 
} 

ver la demo: - http://jsfiddle.net/gXdMc/6/

Answer 5

Simplemente podría utilizar CSS animated text generator. Ya hay plantillas pre-creadas

Answer 6

Me gusta usar lo siguiente para evitar que las cosas queden fuera de mis elementos div. También ayuda con las transferencias de CSS.

.marquee{ 
    overflow:hidden; 
} 

Esto ocultará cualquier cosa que se mueve/es fuera del div que evitará que el navegador ampliando y haciendo que aparezca una barra de desplazamiento.