Javascript和CSS动画定时关闭

Question

我遇到了一些麻烦。我在一个数组中有5行文本，它会随着计时器的变化而变化，但我认为有些地方css计时器动画的计时不正确，或者我设置@keyframe slidesdown的方式设置不正确。

文本不透明度降低到0 后，文本更改之间的时间也相当长

它应该做的是：文本显示--->动画向下滑动--->文本淡入淡出--->下一个文本出现

let textElement = document.querySelector("p")

let textArray = [
"Are you looking for a quick learner?",
"Someone who is ever evolving?",
"Someone who strives to improve their knowledge?",
"Someone who loves problem-solving and finding solutions?",
"Someone who has the tenacity to succeed?"
]
let index = 0;
textElement.innerText = textArray[index]
setInterval(() => {
index = (index + 1) % textArray.length
textElement.innerText = textArray[index]
}, 5000)

.background {
background: var(--light--colour);
height: 88.4vh;
}
@keyframes animateBack {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
p {
height: 2em;
position: absolute;
font-size: 32px;
color: var(--darkest--colour);
margin-left: 1em;
width: 12em;
margin-top: 0em;
animation: slidesdown 5s ease infinite;
}
.vert-line {
border-left: 2px solid #012326;
margin-top: -17em;
height: 7em;
margin-left: 10em;
}
@keyframes slidesdown {
0%,
50% {
transform: translate(0, 0em);
opacity: 1;
}
50%,
100% {
-webkit-transform: translate(0, 1em);
opacity: 0;
}
}

<main>
<div class="background"></div>
<div class="vert-line">
<p></p>
</div>
</main>

Answer 1

let textElement = document.querySelector("p")

let textArray = [
"Are you looking for a quick learner?",
"Someone who is ever evolving?",
"Someone who strives to improve their knowledge?",
"Someone who loves problem-solving and finding solutions?",
"Someone who has the tenacity to succeed?"
]
let index = 0;
textElement.innerText = textArray[index]
setInterval(() => {
index = (index + 1) % textArray.length
textElement.innerText = textArray[index]
}, 5000)

.background {
background: var(--light--colour);
height: 88.4vh;
}
@keyframes animateBack {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
p {
height: 2em;
position: absolute;
font-size: 32px;
color: var(--darkest--colour);
margin-left: 1em;
width: 12em;
margin-top: 0em;
animation: slidesdown 5s ease infinite;
}
.vert-line {
border-left: 2px solid #012326;
margin-top: -17em;
height: 7em;
margin-left: 10em;

}
@keyframes slidesdown {
0%,
50% {
transform: translate(0, 0em);
opacity: 1;
}

100% {
-webkit-transform: translate(0, 1em);
opacity: 0;
}
}

<main>
<div class="background"></div>
<div class="vert-line">
<p></p>
</div>
</main>