Luego de consultar con expertos en este tema, programadores de deferentes áreas y maestros hemos dado con la respuesta al dilema y la dejamos plasmada en este post.
Solución:
Con un pequeño cambio en el marcado, este es mi enfoque (acabo de insertar un span dentro del párrafo):
.marquee
width: 450px;
margin: 0 auto;
overflow: hidden;
box-sizing: border-box;
.marquee span
display: inline-block;
width: max-content;
padding-left: 100%;
/* show the marquee just outside the paragraph */
will-change: transform;
animation: marquee 15s linear infinite;
.marquee span:hover
animation-play-state: paused
@keyframes marquee
0% transform: translate(0, 0);
100% transform: translate(-100%, 0);
/* Respect user preferences about animations */
@media (prefers-reduced-motion: reduce)
.marquee span
animation-iteration-count: 1;
animation-duration: 0.01;
/* instead of animation: none, so an animationend event is
* still available, if previously attached.
*/
width: auto;
padding-left: 0;
When I had journeyed half of our life's way, I found myself
within a shadowed forest, for I had lost the path that
does not stray. – (Dante Alighieri, Divine Comedy.
1265-1321)
No se han insertado valores codificados, según el ancho del párrafo.
La animación aplica el CSS3. transform property (use prefijos cuando sea necesario) para que funcione bien.
Si necesita insertar un retraso solo una vez al principio, configure también un animation-delay. Si necesita insertar un pequeño retraso en todos loop luego intente jugar con un mayor padding-left (p.ej 150%)
Según la respuesta anterior, principalmente @fcalderan, esta marquesina se desplaza cuando se desplaza el cursor, con la ventaja de que la animación se desplaza por completo, incluso si el texto es más corto que el espacio dentro del cual se desplaza, además, cualquier longitud de texto requiere la misma cantidad de tiempo (esto puede ser un pro o un contra) cuando no se pasa el cursor sobre el retorno del texto en la posición inicial.
Sin valor codificado aparte del tiempo de desplazamiento, más adecuado para espacios de desplazamiento pequeños
.marquee
width: 100%;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
display: inline-flex;
.marquee span
display: flex;
flex-basis: 100%;
animation: marquee-reset;
animation-play-state: paused;
.marquee:hover> span
animation: marquee 2s linear infinite;
animation-play-state: running;
@keyframes marquee
0%
transform: translate(0%, 0);
50%
transform: translate(-100%, 0);
50.001%
transform: translate(100%, 0);
100%
transform: translate(0%, 0);
@keyframes marquee-reset
0%
transform: translate(0%, 0);
This is the marquee text
La animación de respuestas aceptadas no funciona en Safarilo actualicé usando traducir en lugar de padding-left, lo que hace que la animación sea más fluida y a prueba de balas.
Además, el violín de demostración de respuestas aceptadas tiene muchos estilos innecesarios.
Así que creé una versión simple si solo desea cortar y pegar el código útil y no pasar 5 minutos limpiando la demostración.
http://jsfiddle.net/e8ws12pt/
.marquee
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
padding: 0;
height: 16px;
display: block;
.marquee span
display: inline-block;
text-indent: 0;
overflow: hidden;
-webkit-transition: 15s;
transition: 15s;
-webkit-animation: marquee 15s linear infinite;
animation: marquee 15s linear infinite;
@keyframes marquee
0% transform: translate(100%, 0); -webkit-transform: translateX(100%);
100% transform: translate(-100%, 0); -webkit-transform: translateX(-100%);
Simple CSS Marquee - Lorem ipsum dolor amet tattooed squid microdosing taiyaki cardigan polaroid single-origin coffee iPhone. Edison bulb blue bottle neutra shabby chic. Kitsch affogato you probably haven't heard of them, keytar forage plaid occupy pitchfork. Enamel pin crucifix tilde fingerstache, lomo unicorn chartreuse plaid XOXO yr VHS shabby chic meggings pinterest kickstarter.