Javascript 如何在具有灵活高度的页面滚动上触发css动画？

我的设计使用了高度：100%；对于顶部图像-那么，当用户向下滚动到页面的另一部分而不仅仅是页面加载时，是否有任何方法可以触发类似顶部图像上的css3动画

我的设计； 如果您滚动到底部（质量网络）并刷新页面，您可以看到我想要的内容，但我只希望在用户向下滚动到该部分时触发它

我想让下面的内容像这个网站一样，当用户向下滚动时，文本/图像从侧面淡入

HTML

---

如果你检查页面，你会看到他们正在使用。你找到了解决方案吗？我也有同样的问题！

<div id="animated-example" class="animated fadeInDown"></div>

.animated { 
-webkit-animation-duration: 1s; 
animation-duration: 1s; 
-webkit-animation-fill-mode: both; 
animation-fill-mode: both; 
} 

@-webkit-keyframes fadeInDown { 
0% { 
    opacity: 0; 
    -webkit-transform: translateY(-20px); 
} 
100% { 
    opacity: 1; 
    -webkit-transform: translateY(0); 
} 
} 

@keyframes fadeInDown { 
0% { 
    opacity: 0; 
    transform: translateY(-20px); 
} 
100% { 
    opacity: 1; 
    transform: translateY(0); 
} 
} 

.fadeInDown { 
-webkit-animation-name: fadeInDown; 
animation-name: fadeInDown; 
}