Javascript and CSS animation timing off-CodePudding

I have been having a bit of trouble. I have a 5 lines of text in an array that changes with a timer, but I think some where along the line the css timer animation is not timed right, or the way I set up the @keyframes slidesdown is not set up correctly.

The time between the changes of text is also quite long after the texts opacity is gone down to 0

What it should do is: text displays--->animation slides down--->text fades--->next text appears

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 ></div>

  <div >
    <p></p>
  </div>
</main>

CodePudding user response：

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 ></div>

  <div >
    <p></p>
  </div>
</main>