0
322
VistasCSS de izquierda a derecha, reaparece la animación izquierda
Tengo una imagen que animé con CSS. Va de -200 px a la izquierda a 2100 px a la derecha y luego comienza de nuevo. Lo que quiero hacer es cuando parte de la imagen desaparece a la derecha, quiero que esa parte se muestre en el lado izquierdo y continúe con la animación.
Aquí tienes un ejemplo de lo que quiero, puedes ver como parte del texto que sale de pantalla a la derecha vuelve a aparecer a la izquierda y continúa la animación. Quiero hacer lo mismo con CSS o JS.
Parte de mi código en este momento (lo hice pequeño, no vea la pantalla completa):
body { background-color: pink; width: 400px; height: 200px; } .box { position: absolute; bottom: 50px; left: 0px; width: 200px; height: 100px; background-color: black; animation: animate 5s linear infinite; } @keyframes animate { 0% { transform: translateX(-100%); } 100% { transform: translateX(310%); } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="box"></div> </body> </html>
·
Juan Pablo Isaza
Responde la pregunta