突然發現css3動畫是可以暫停的

今天逛下大前端發現一個好玩的東西，用css3做動畫我們已經玩過很多次了吧，結果居然還可以暫停這動畫，這是之前沒有運到過的，話不多說上代碼。

1. 首先上html代碼(對就只要一個div)

	<div class="play-state">
	  	暫停
	</div>

2.給play-state加上樣式（目前這個的效果是在鼠標移上去時停止的）

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

w3school官網（animation-play-state:paused;）參數對應的地址

轉發來自大前端原文章鏈接