You want the text to move like a marquee ? Check the below snippet.
.holder {
background: #ccc;
padding: 0.5rem;
overflow: hidden;
}
.news {
display: inline-block;
animation: rightleft 20s linear infinite;
white-space: nowrap;
}
.news.left {
animation: leftright 20s linear infinite;
}
@keyframes rightleft {
0% {
transform: translate(100vw, 0);
}
100% {
transform: translate(-100%, 0);
}
}
@keyframes leftright {
0% {
transform: translate(-100%, 0);
}
100% {
transform: translate(100vw, 0);
}
}
<div class="holder">
<div class="news left">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi quae magnam corrupti recusandae ratione architecto asperiores aspernatur earum nam illo, laborum illum sint amet quos natus dolores reprehenderit dolor tenetur?</div>
</div>
Bonus:
If you want to change the direction of the text flowing, add the left class name to news which will start the text starting from left to right, and removing the same class name would flow the text in opposite direction
Here is my attempt at rotating the text like you requested (marquee effect):
Note that the text rotates from left to right here. You can change this by turning the animation around.
.holder {
background: #ccc;
padding: .5rem;
overflow: hidden;
max-height: calc(1rem);
white-space: nowrap;
}
.news {
padding-left: 100%;
display: inline-block;
font-size: 1rem;
animation: infinite slide 10s linear;
}
@keyframes slide {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0%);
}
}
<div class="holder">
<div class="news">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint debitis ullam, voluptates reprehenderit quasi dignissimos sed voluptatum perspiciatis iusto, impedit error incidunt illum, temporibus quod obcaecati praesentium placeat ipsam deleniti!</div>
</div>
.holder {
background: #ccc;
padding: 0.5rem;
overflow: hidden;
}
.news {
animation: slide 10s linear infinite;
}
@keyframes slide {
0% {
transform: translatex(0%);
}
100% {
transform: translatex(100%);
}
}
<div class="holder">
<div class="news">a lot of text</div>
</div>
How is it possible to display all the text in just one line, and the text will constantly rotate?
Oh, so translateX, like you’ve written. Not rotateZ for example?
Yes. And does it have to go back and forth along the screen or does it have to go in one direction only, and show the clipped text at the beginning?
