Alihkan teks dengan cepat

Question

Saya cuba mencipta gelung tak terhingga untuk teks saya yang bermula pada skrin. Tetapi semua kaedah yang saya temui bermula dari skrin dan pergi ke skrin. Selepas itu, semuanya berfungsi dengan sempurna untuk keperluan saya, tetapi titik permulaan merosakkan konsep saya.

Saya tahu kami mempunyai beberapa teg HTML yang boleh mengalihkan teks, tetapi ia juga tidak membantu saya.

.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>

Saya juga tidak suka bar skrol melintang itu, jadi jika ada cara saya boleh menyingkirkannya.

Answer 1

Anda boleh melakukan ini dengan banyak cara yang berbeza, tetapi percubaan anda adalah ok, jadi saya menetapkannya mengikut keperluan anda. Untuk menatal mendatar, anda hanya perlu menetapkan limpahan-x kepada tersembunyi dan menetapkannya pada div induk. Saya menetapkannya ke seluruh badan, tetapi anda boleh mengubahnya.

.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>