請到我的個人博客網站上瀏覽此文章，歡迎評論和建議。
文章鏈接：http://www.xiaoxianworld.com/archives/87
現在css3動畫很常見了，實際項目中經常應用，特別是那種長長的信息展示類的頁面。於是產生一個問題，需要控制動畫的運行，就像給其加一個開關，什么時候動，什么時候停，想隨心所欲的控制。自然會用到animation-play-state屬性，其兩個屬性值paused：規定動畫已暫停，和running：規定動畫正在播放，正好能滿足要求。
對於那種長長的頁面，給一些文字或圖片添加了動畫后，想實現其隨着頁面滾動而動畫的效果，因為如果動畫一開始就運行，那么處在不是第一屏的內容，就算其動畫運行了，我們也看不到。所以，就要實現，當內容從頁面底端滾動出來，也就是出現在視野范圍內時，動畫才運行。這就免不了用到js，來獲取滾動條滾動的高度，和動畫所在層的位置。
寫了一個簡單的demo來具體說明吧，只寫了一個文字從右向左移動的動畫，當其滾動出現時，才運行：
html:
<div class="con">內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</div>
<ul class="list">
<li>
<p>第1屏動畫進入視線</p>
</li>
<li>
<p>第2屏動畫進入視線</p>
</li>
<li>
<p>第3屏動畫進入視線</p>
</li>
</ul>
css:
.con{ height:1200px;}
.list{ list-style:none; padding:0; margin:0; border-top:2px solid blue;}
.list li{ height:500px; border-bottom:1px solid green;}
.list li p{ opacity:0; animation:move 1s forwards; animation-play-state:paused;}
.list .move p{ animation-play-state:running;}
@keyframes move{
from{ opacity:0; margin-left:500px;}
to{ opacity:1; margin-left:0;}
}
js:
$(document).ready(function(){
var a,b,c;
a=$(window).height();
$(window).scroll(function(){
var b=$(this).scrollTop();
$(".list li").each(function(){
c=$(this).offset().top;
if(a+b>c){
$(this).addClass("move");
}
else{
$(this).removeClass("move");
}
});
});
});