使动画延迟直到视窗?

Question

我在一个网站上工作，介绍文本将根据一天的时间显示。它会在"早上好"one_answers"晚上好"之间切换。我找到了一种使用CSS的方法来延迟每个单词一个接一个地淡入。问题在于，文字并没有直接出现在视口中，所以动画在观众看到它之前就已经发生了。我如何延迟是，直到它在视窗?下面是我当前的代码，包括使动画一个接一个进入的CSS:

var time = new Date().getHours();
if (time >= 1 && time <= 12) {
document.getElementById("time").innerHTML = "<span>☀️</span> <span>Good</span> <span>Morning,</span> <span>Creative.</span>"
} else if (time > 12 && time <= 17) {
document.getElementById("time").innerHTML = "<span>☀️</span> <span>Good</span> <span>Afternoon,</span> <span>Creative.</span>"
} else {
document.getElementById("time").innerHTML = "<span>🌙</span> <span>Good</span> <span>Evening,</span> <span>Creative.</span>"
}

#time span {
opacity: 0;
transform: translateY(30px);
animation: time 0.5s ease-out forwards;
display: inline-block;
}
#time span:nth-of-type(2) {
animation-delay: 0.5s;
}
#time span:nth-of-type(3) {
animation-delay: 0.5s;
}
#time span:nth-of-type(4) {
animation-delay: 1s;
}
@keyframes time {
to {
opacity: 1;
transform: translateY(0);
}
}

<h4 id="time">Hello Creative</h4>

是否有一些方法来澄清CSS中的视口?或者这需要JS吗?谢谢你的帮助!

Answer 1

不幸的是，没有办法检测什么时候的CSS视图。你应该查看交集观察者API，然后当观察到的项目在视图中时应用动画CSS类。