暂停正在运行的css动画
作者：microsoftvs 更新时间：2019/9/11 9:56:41 点击数：2123
使用animationplaystate来暂停正在运行的css动画
如果您想停止正在运行的CSS动画，可以使用animation-play-state: paused;方法来暂停。
实例源码
<!doctype html>
<html>
<head>
<meta set="utf-8">
<title>暂停正在运行的css动画</title>
<style>
.play-state {
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-state:hover {
animation-play-state: paused;
}
@keyframes play-state {
0% {
margin-left: 0;
}
100% {
margin-left: 200px;
}
}
</style>
</head>
<body>
<div class="play-state">
暂停
</div>
</body>
</html>