潮人街

css动画已经很熟悉了，用的也越来越多，基本每个网站都有用到。但是css动画可以暂停？我还真不知道。

animation-play-state（running | paused）

该属性定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放。其中恢复已暂停的动画，是从它暂停的时候，而不是从动画的起点。

<div class="play">
    点我
</div>

.play{  
    width: 100px; 
    height:100px; 
    margin: 40px; 
    text-align:center;
    line-height: 94px; 
    border: 3px solid #e1efde; 
    border-radius: 50%; 
    animation: play-state 3s linear infinite; 
    cursor: pointer; 
}
.play:hover {   
    animation-play-state: paused; 
}
@keyframes play-state {   
    0% {
        margin-left: 0;
    }   
    100% {
        margin-left: 200px;
    } 
}