I'm trying to create an infinite loop for my text that starts on the screen. But all the methods I've found start off the screen and go into the screen. After that, everything worked perfectly for my needs, but the starting point ruined my concept.
I know we have some HTML tags that can move the text, but it doesn't help me either.
.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>
I don't like that horizontal scrollbar either, so if there's any way I can get rid of it.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You can achieve this in a number of different ways, but your attempt was ok, so I fixed it to your needs. For horizontal scrolling, you only need to set overflow-x to hidden and set it on a parent div. I set it to the entire body, but you can change it.
.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%); } }