I've made a basic text animation where text is going from left to right.It works smoothly but when last span gets to 100% it jumps straight to 0% without any transition.
Here a little snippet of what I have at the moment. Oh and is there any way to remove the little glitch we can see on text during this animation?
html {
min-height: 100%;
}
.container{
display: flex;
flex-direction: row;
animation: left-to-right-animation 6s linear infinite;
}
@keyframes left-to-right-animation {
0% { transform: translate(-20%, 0%);}
100%{ transform: translate(120%, 0%);}
}
.title{
width: 100%;
}
p.about {
font-size: 4em;
font-weight: 400;
top: 0;
left: 0;
margin: 20px;
white-space: nowrap;
text-rendering: optimizeSpeed;
}<html>
<body>
<div class="title">
<div class="container">
<p class="about">Text 1</p>
<p class="about">Text 2</p>
<p class="about">Text 3</p>
<p class="about">Text 4</p>
</div>
</div>
</body>
</html>
