CSS3 animation-play-state

admin發表於2018-09-06
CSSS3

animation-play-state屬性規定動畫正在執行還是暫停。

更多關於animation動畫可以參閱CSS3 animation一章節。

語法結構:

[CSS] 純文字檢視 複製程式碼
animation-play-state: paused|running;

引數解析:

（1）.paused:規定動畫已經暫停。

（2）.running:規定動畫正在播放。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/" />   
<title>螞蟻部落</title>
<style> 
div{
  width:100px;
  height:100px;
  background:red;
  position:relative;
  animation:antzone 5s;
  animation-play-state:paused;
 
  /* Safari和谷歌瀏覽器相容 */
  -webkit-animation:antzone 5s;
  -webkit-animation-play-state:paused;
}
 
@keyframes antzone{
  from {left:0px;}
  to {left:200px;}
}
/* Safari和谷歌瀏覽器相容 */
@-webkit-keyframes antzone{
  from {left:0px;}
  to {left:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

上面的程式碼演示了animation-play-state屬性的用法。

相關文章