Javascript和CSS动画超时

Question

我最近有点麻烦。我在数组中有5行文本，随着计时器的变化而变化，但我认为有些地方css计时器动画的时间不是正确的，或者我设置@keyframes幻灯片的方式没有正确设置。

文本透明度下降到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>

​