Estoy trabajando infinitamente en la animación de diapositivas para texto en contenedor.
Sin embargo, encontré que no funcionaba bien. Cuando el texto llega al final, parece que se reinicia en lugar de repetir el texto.
Lo que quiero es que el texto siga deslizándose hacia la derecha continuamente.
¿Cómo resolverlo?
Aplicación.js
import "./styles.css"; export default function App() { return ( <div className="App"> <div class="slide-right"> <h2> <span>A</span> <span>A</span> <span>A</span> <span>A</span> <span>A</span> <span>A</span> </h2> </div> </div> ); }Estilos.css
.App { font-family: sans-serif; text-align: center; } .slide-right { border: 1px solid grey; width: 150px; overflow: hidden; } .slide-right h2 { animation: infinite slide-right 2s linear; transform: translateX(-100%); text-align: right; } .slide-right h2 span { margin-right: 10px; } @keyframes slide-right { to { transform: translateX(0); } } Códigosycaja:
https://codesandbox.io/s/hidden-bird-qy3jy?file=/src/styles.css
Cambie sus fotogramas clave "deslizar hacia la derecha" de transform: translateX(0); para transform: translateX(100%);
@keyframes slide-right { to { transform: translateX(100%); } }Usa esto en lugar de traducirX(0)
Duplica el número de A para que el efecto sea continuo.
Para obtener un flujo continuo, este fragmento tiene dos copias de los tramos.
Inicialmente, el h2 se traduce -50%, por lo que solo se muestra el comienzo de la segunda mitad.
La animación lo mueve a la derecha para que termine mostrando el comienzo de la primera mitad.
Luego, en la repetición, el comienzo de la segunda mitad toma el lugar del comienzo de la primera mitad, por lo que todo parece continuo.
.App { font-family: sans-serif; text-align: center; } .slide-right { border: 1px solid grey; width: 150px; overflow: hidden; } .slide-right h2 { animation: infinite slide-right 2s linear; transform: translateX(-50%); display: inline-block; } .slide-right h2 span { margin-right: 10px; } @keyframes slide-right { to { transform: translateX(0); } } <div class="App"><div class="slide-right"><h2><span>A</span><span>A</span><span>A</span><span>A</span><span>A</span><span>A</span><span>A</span><span>A</span><span>A</span><span>A</span><span>A</span><span>A</span></h2></div></div>Nota: para evitar problemas con el ajuste del texto, los intervalos se presentan de forma continua (como en los códigos y el cuadro en la pregunta).