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

Question

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

Answer 1

你需要使用JS或jQuery的到触发您CSS3过渡 /动画
一旦元素是视**。

jsFiddle demo - Using inViewport plugin

听load，resize和scroll事件得到如果一个元素进入视窗。
可以使用小的jQuery插件我已经建立： （https://stackoverflow.com/a/26831113/383904）

比方说，你有一个动画盒子，像是：

<div class="box rotate"></div> 
<div class="box scale"></div> 
<div class="box translate"></div> 

比你的CSS您有：

.box{ 
    width:300px; 
    height:300px; 
    margin:500px 50px; 
    background:red; 
    transition: 1.5s; /* THE DURATION */ 
} 

.rotate.triggeredCSS3 {transform : rotate(360deg); } 
.scale.triggeredCSS3  {transform : scale(1.6); } 
.translate.triggeredCSS3 {transform : translate3d(400px,0,0); } 

其中.triggeredCSS3将由插件动态分配：

$(".box").inViewport(function(px){ 
    if(px) $(this).addClass("triggeredCSS3") ; 
});