Javascript CSS3动画元素（如果在视口中可见）（页面滚动）

我已经将CSS动画添加到html页面上的各种div元素中。但是所有动画同时播放&我看不到页面底部的动画。我如何在向下滚动页面时播放它们？

使用IntersectionObserver API 提供了一种异步观察目标元素与祖先元素或顶级文档视口相交处的更改的方法

下面是一个示例，该示例在元素位于视口中时触发：

const inViewport=（条目，观察者）=>{
entries.forEach（entry=>{
entry.target.classList.toggle（“is inViewport”，entry.isIntersecting）；
});
};
const Obs=新的IntersectionObserver（inViewport）；
常量obspoptions={}//见：https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options
//将观察者附加到每个[data inviewport]元素：
const ELs_inViewport=document.queryselectoral（“[data inViewport]”）；
ELs_inViewport.forEach（EL=>{
Obs.观察（EL，Obs选项）；
});
[data inviewport]{/*仅此演示*/
宽度：100px；高度：100px；背景：0bf；边距：150vh 0；
}
/*因维波特*/
[data inviewport=“按比例缩放”]{
过渡：2s；
变换：比例（0.1）；
}
[data inviewport=“scale in”]是inviewport{
变换：比例（1）；
}
[data inviewport=“淡入淡出旋转”]{
过渡：2s；
不透明度：0；
}
[data inviewport=“淡入淡出旋转”]。是inviewport{
变换：旋转（180度）；
不透明度：1；
}
向下滚动。。。
仍然是Javascript，但使用此版本，您不需要监听滚动事件。
速度和性能比每次检查视口中是否有对象要好得多

选中此项：

使用交集观察者，可以在元素可见时定义回调

选项：

root
：null另一种方法是使用滚动事件侦听器


document.addEventListener（“DOMContentLoaded”），函数（事件）{
document.addEventListener（“滚动”），函数（事件）{
const animatedbox=document.getElementsByClassName（“动画框”）；
const windowOffsetTop=window.innerHeight+window.scrollY；
Array.prototype.forEach.call（animatedBox，（animatedBox）=>{
常量animatedBoxOffsetTop=animatedBox.offsetTop；
如果（windowOffsetTop>=animatedBoxOffsetTop）{
addClass（动画框，“淡入”）；
}
});
});
});
函数addClass（元素，类名）{
const arrayClasses=element.className.split（“”）；
if（arrayClasses.indexOf（className）=-1）{
element.className+=“”+className；
}
}
。动画框{
宽度：150px；
高度：150像素；
边际上限：100vh；
背景：蓝色；
}
.淡入{
-webkit动画：淡入1.2s立方贝塞尔（0.390、0.575、0.565、1.000）二者；
动画：淡入1.2s立方贝塞尔（0.390、0.575、0.565、1.000）二者；
}
@-webkit关键帧淡入{
0% {
-webkit转换：translateY（50px）；
变换：translateY（50px）；
不透明度：0；
}
100% {
-webkit转换：translateY（0）；
变换：translateY（0）；
不透明度：1；
}
}
@关键帧淡入{
0% {
-webkit转换：translateY（50px）；
变换：translateY（50px）；
不透明度：0；
}
100% {
-webkit转换：translateY（0）；
变换：translateY（0）；
不透明度：1；
}
}

开始向下滚动。。。
使用JS，如果某个元素在视口中，则向所有该元素添加一个类。该类应该触发CSS3动画。抱歉，我使用上面的插件创建了一个.js文件->将其添加到我的index.html->通过将.triggeredcs3添加到.example\u动画->编辑了我的.css文件，但现在所有动画都无法工作@Roko C.Buljan是的，我包括了pluginI尝试了这些东西，但仍然不起作用@罗科C。Buljan@RokoC.Buljan您知道如何删除该类，以便在您向后滚动时再次触发动画吗？@probablybest只需使用
$（this）.toggleClass（“triggeredcs3”，！！px）我觉得现在应该接受这个答案。旧的示例仍然有效，但已经过时。这应该是正确的答案，显示了良好的实践，避免了数千次执行函数。当您滚动回第一个块时，删除第二个块可见性文本如何？看起来不应该太难。。。