Despite trying various methods, I'm struggling to adjust the duration of my animations. I want each animated text to be displayed for 2-3 seconds, as they are currently moving too quickly. How can I resolve this issue? Please note that the specific placement of the animated text is not a concern.
.container {
position: fixed;
top: 50%;
left: -10%;
padding: 2em 5em;
}
.container p {
height: 60px;
float: left;
margin-right: 0.3em;
}
.container b {
float: left;
overflow: hidden;
position: relative;
height: 30px;
top: 5px;
}
.container .animatedText {
display: inline-block;
color: #ac1101;
position: relative;
white-space: nowrap;
animation: moveAnimation 5s linear infinite;
}
@keyframes moveAnimation {
0% {
top: 0px;
}
20% {
top: -50px;
}
40% {
top: -100px;
}
60% {
top: -150px;
}
80% {
top: -200px;
}
}<div class="container">
<p>Content goes here</p>
<b>
<div class="animatedText">
Text 1<br>
Text 2
</div>
</b>
</div>