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; } }
发表评论:
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。