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") ; 
});