Animation Text Duration - css

Question

I've tried many things however, I cannot control the animation duration. Basically, I would like to show my every animated text for 2-3 seconds. My text is animated too fast. How can I fix that? Note: the place of the animated text is not important.
.wrapper {
position: absolute;
top: 35%;
left: -4%;
padding: 2em 5em;
color: #000;
font-weight: 700;
font-size: 150%;
}
.wrapper p {
height: 60px;
float: left;
margin-right: 0.3em;
}
.wrapper b {
float: left;
overflow: hidden;
position: relative;
height: 30px;
top: 5px;
}
.wrapper .animationText {
display: inline-block;
color: #ac1101;
position: relative;
white-space: nowrap;
top: 0;
left: 0;
animation: move 7s;
animation-iteration-count: infinite;
animation-delay: 2s;
}
#keyframes move {
0% {
top: 0px;
}
20% {
top: -50px;
}
40% {
top: -100px;
}
60% {
top: -150px;
}
80% {
top: -200px;
}
}
<div class="wrapper">
<p>Some text here</p>
<b>
<div class="animationText">
anime text 1<br>
anime text 2
</div>
</b>
</div>

Answer 1

You can try this:
.wrapper {
position: absolute;
top: 35%;
left: -4%;
padding: 2em 5em;
color: #000;
font-weight: 700;
font-size: 150%;
}
.wrapper p {
height: 60px;
float: left;
margin-right: 0.3em;
}
.wrapper .b {
float: left;
overflow: hidden;
position: relative;
height: 30px;
top: 5px;
}
.wrapper .animationText {
display: inline-block;
color: #ac1101;
position: relative;
white-space: nowrap;
top: 0;
left: 0;
animation: move 3s;
animation-iteration-count: infinite;
animation-delay: 2s;
}
#keyframes move {
0%,30% {
top: 0%;
}
60%,100% {
top:-100%;
}
}
<div class="wrapper">
<p>Some text here</p>
<div class="b">
<div class="animationText">
anime text 1<br> anime text 2
</div>
</div>
</div>

Answer 2

Try adjusting animation-delay longer.