Web代码只是不工作-文本不断弹出动画后

Question

所以我试图动画三个短语放大和淡入，然后淡出连续，无限循环。但是在第一次循环迭代后，文本会以100%的不透明度弹出几秒钟，然后在动画完成后突然消失。

如果我只播放一次动画，它不会这样做。

参见GIF: https://i.gyazo.com/24574a5112f8920ce1a37a2fa65f4a40.gif

源代码:

<div class="anim-box">
<h4 class="loop-phrase" id="move">Move Better</h4>
<h4 class="loop-phrase" id="heal">Heal Faster</h4>
<h4 class="loop-phrase" id="live">Live Longer</h4>
</div>

.anim-box {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.loop-phrase {
font-size: 24px;
opacity: 0;
position: absolute;
color: #fff;
}
#move {
animation: move 2s linear;
}
#heal {
animation: heal 2s linear;
animation-delay: 2s;
}
#live {
animation: live 2s linear;
animation-delay: 4s;
}
@keyframes move {
0% {
transform: scale(1);
opacity: 0;
}
50% {
transform: scale(2);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
}
}
@keyframes heal {
0% {
transform: scale(1);
opacity: 0;
}
50% {
transform: scale(2);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
}
}
@keyframes live {
0% {
transform: scale(1);
opacity: 0;
}
50% {
transform: scale(2);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
}
}

function animateText() {
const moveText = document.getElementById('move');
const healText = document.getElementById('heal');
const liveText = document.getElementById('live');
let counter = 0;
setInterval(() => {
if (counter === 0) {
moveText.style.opacity = 0;
setTimeout(() => {
moveText.style.opacity = 1;
moveText.style.animation = 'none';
void moveText.offsetWidth;
moveText.style.animation = 'move 2s linear';
counter++;
}, 1000);
} else if (counter === 1) {
healText.style.opacity = 0;
setTimeout(() => {
healText.style.opacity = 1;
healText.style.animation = 'none';
void healText.offsetWidth;
healText.style.animation = 'heal 2s linear';
counter++;
}, 1000);
} else if (counter === 2) {
liveText.style.opacity = 0;
setTimeout(() => {
liveText.style.opacity = 1;
liveText.style.animation = 'none';
void liveText.offsetWidth;
liveText.style.animation = 'live 2s linear';
counter = 0;
}, 1000);
}
}, 3000);
}
window.onload = function() {
animateText();
};

尝试在文本动画之间的1秒延迟期间将不透明度调整为0%，但无济于事。我真的卡住了。

Answer 1

maybe:

const animateText = () => {
const text = document.getElementById("text");
let counter = 0;
setInterval(() => {
switch (counter) {
case 0:
text.textContent = "Move Better"
counter++
break;
case 1:
text.textContent = "Heal Faster"
counter++
break;
case 2:
text.textContent = "Live Longer"
counter = 0;
break
default:
}
}, 3000);
};
//animateText()

.body {
background-color: black;
}
.anim-box {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.loop-phrase {
font-size: 24px;
opacity: 0;
position: absolute;
color: #fff;
}
#text {
animation: text 3s linear;
animation-iteration-count: infinite;
}

<h4 class="loop-phrase" id="text"></h4>