46、状态平滑的动画

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