如何暂停animation动画,用animation-play-state属性就好了
http://www.w3school.com.cn/cssref/pr_animation-play-state.asp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>animation-play-state</title>
<style>
.play {
animation-play-state: running !important;
}
.pause {
animation-play-state: paused !important;
}
#main {
margin-left: 20%;
width: 100px;
height: 100px;
background-color: red;
animation: mainAnim 2s ease 2s infinite alternate;
animation-fill-mode: backwards;
}
@keyframes mainAnim {
from {
margin-left: 0;
}
to {
margin-left: 50%;
}
}
</style>
</head>
<body>
<p>
<button onclick="main.classList.remove('pause')">开始</button>
<button onclick="main.classList.add('pause')">暂停</button>
</p>
<div id="main"></div>
</body>
</html>