01
2020
12

css动画可以暂停

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


« 上一篇

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。