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

Question

我的设计使用高度：100％;对于顶部图像 - 当用户向下滚动到页面的另一部分而不仅仅是页面加载时，有没有办法触发css3动画，如顶部图像上的动画？

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

http://www.webxury.net/datacenter/

当用户向下滚动文字/图片从侧面淡入时，我想将此内容设为如下网站

http://cloudfire.uk/

HTML

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

CSS

.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; 
}