假設(shè)我們有一張非常長(zhǎng)寬幅的照片，但只提供一個(gè)150 x 150的區(qū)域利用動(dòng)畫來展示它。
<div class="one">
</div>
我們給它加上動(dòng)畫屬性，并且改變它的background- position屬性，當(dāng)它的值從原來的 0 0一直變化到100% 0時(shí)，鼠標(biāo)懸停在圖片上我們就會(huì)看到這張圖片從左滾動(dòng)到右的完整過程。
@keyframes one{
to { background-position: 100% 0;}
}
.one {
width:150px;
height:150px;
background: url("xxx.jpg" );
background-size: auto 100%; /*此處把圖片的高度設(shè)置為可視區(qū)域的高度*/
}
.one:hover, .one:focus {
animation:one 10s linear infinite alternate;
}
不過，當(dāng)我們把鼠標(biāo)從圖片上移出時(shí)，它就會(huì)生硬的跳回最左側(cè)，最初的樣子。
而我們所期待的是當(dāng)鼠標(biāo)移出時(shí)，圖片就暫停在當(dāng)下，當(dāng)鼠標(biāo)又放上去時(shí)，動(dòng)畫繼續(xù)的效果。此時(shí)就會(huì)用到
animation-play-state。因此我們需要把動(dòng)畫加在
.one這條樣式中，讓它一開始就處于暫停狀態(tài)，直到 :hover 時(shí)再啟動(dòng)動(dòng)畫。這再也不是添加和取消動(dòng)畫的問題了，而是 暫停和繼續(xù)一個(gè)一直存在的動(dòng)畫。
@keyframes one{
to { background-position: 100% 0;}
}
.one {
width:150px;
height:150px;
background: url("http://seopic.699pic.com/photo/00000/9982.jpg_wh1200.jpg" );
background-size: auto 100%;
animation:one 10s linear infinite alternate;
animation-play-state: paused; /*動(dòng)畫處于暫停狀態(tài)*/
}
.one:hover, .one:focus {
animation-play-state: running; /*鼠標(biāo)懸停時(shí)動(dòng)畫便運(yùn)行*/
}
這時(shí)，便能得到我們想要的效果了。
<u>查看demo</u>
參考書籍：Lea Verou《CSS揭秘》
