quiero crear un archivo HTML de animación "carpa" que se desplaza hacia atrás y adelante en un sitio web:CSS-pasar el texto de izquierda a derecha
<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%}
use javascript para detener la animación usando la propiedad css –
@Webtecher ¿cómo sabe el javascript cuándo detener la animación? –
En lugar de a la izquierda: 100% debe dejarse: '100% - (número de caracteres en cadena * espacio ocupado por un solo caracter)' Ahora, obviamente no hará tales cosas en css. Así que mejor en lugar de usar 'left' o' right', use 'margin-left' o' margin-right'. –