CSS3動畫中的animation-play-state屬性可以控制動畫的暫停和繼續,動畫往往需要類似:hover效果來觸發,但是當動畫還未執行完成:hover狀態就消失的時候,動畫會結束然后生硬的跳回初始狀態。使用animation-play-state可以是動畫在:hover狀態消失的時候暫停,再次:hover的時候繼續執行動畫。
.a{
background: url("1.png") no-repeat left top / auto 100%;
animation: bg 4s linear infinite alternate;
animation-play-state: paused;
}
.a:hover{
animation-play-state: running;
}
@keyframes bg {
to {
background-position:100% 0;
}
}