动画可以暂停animation-play-state 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></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>
<script>

</script>

 

posted @ 2019-05-29 16:33  归尘2016  阅读(622)  评论(0)  编辑  收藏  举报