CSS3 animation-name

admin發表於2018-09-06
CSSS3

animation-name屬性規定元素所應用的動畫名稱，由@keyframes規定。

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

語法結構:

[CSS] 純文字檢視 複製程式碼
animation-name: keyframename|none;

引數解析:

（1）.keyframename:規定應用到元素的動畫名稱。

（2）.none:規定無動畫效果（可用於覆蓋來自級聯的動畫）。

程式碼例項:

[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-name:antzone;
  animation-duration:5s;
 
  /* Safari和谷歌瀏覽器相容 */
  -webkit-animation-name:antzone;
  -webkit-animation-duration:5s;
}
 
@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-name屬性的用法。

相關文章