Déplacer le texte rapidement

Question

J'essaie de créer une boucle infinie pour mon texte qui démarre à l'écran. Mais toutes les méthodes que j'ai trouvées partent de l'écran et pénètrent dans l'écran. Après cela, tout a parfaitement fonctionné pour mes besoins, mais le point de départ a ruiné mon concept.

Je sais que nous avons des balises HTML qui peuvent déplacer le texte, mais cela ne m'aide pas non plus.

.text1{
  animation: move 5s linear 2.5s infinite;
  transform: translateX(-100%);
}

*{
  margin: 0;
  padding:0;
}

.wrapper{
  display: flex;
}

@keyframes move{
  from{
    transform: translateX(-100%);
  }
  
   to{
     transform: translateX(100%);
   }
}

.text2{
  position: absolute;
  animation: move 5s linear 0s infinite;
}

.text1,.text2{
  font-size: 80px;
   white-space: nowrap;
}

<div class="wrapper">
  
<div class="text1">Lorem ipsum dolor sit amet. </div>

<div class="text2">Lorem ipsum dolor sit amet.</div>

</div>

Je n'aime pas non plus cette barre de défilement horizontale, donc s'il y a un moyen de m'en débarrasser.

Answer 1

Vous pouvez procéder de différentes manières, mais votre tentative s'est bien déroulée, alors je l'ai adapté à vos besoins. Pour le défilement horizontal, il vous suffit de définir overflow-x sur masqué et de le définir sur un div parent. Je l'ai réglé sur tout le corps, mais vous pouvez le modifier.

.text1{
  animation: move 5s linear 2.5s infinite;
  transform: translateX(-100%);
}

*{
  margin: 0;
  padding:0;
}

.wrapper{
  display: flex;
}

body{
  overflow-x: hidden;
}

@keyframes move{
  from{
    transform: translateX(100%);
  }
  
   to{
     transform: translateX(-100%);
   }
}

.text2{
  position: absolute;
  animation: move 5s linear 0s infinite;
}

.text1,.text2, .text3{
  font-size: 50px;
   white-space: nowrap;
}

.text3{
  position: absolute;
   animation: move2 2.5s linear 0s;
     animation-fill-mode: forwards;

}

@keyframes move2{
  from{
    transform: translateX(0%);
  }
  
   to{
     transform: translateX(-100%);
   }
}

<div class="wrapper">
  
<div class="text1">Lorem ipsum dolor sit amet. </div>

<div class="text2">Lorem ipsum dolor sit amet.</div>

<div class="text3">Lorem ipsum dolor sit amet.</div>

</div>