CSS3 animation-duration

admin發表於2018-09-06
CSSS3

animation-duration屬性規定動畫的持續時間。

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

語法結構:

[CSS] 純文字檢視 複製程式碼
animation-duration：<time> [ ,<time>]*

引數解析:

time：規定動畫執行的時長，單位是秒（s）。

特別說明:如果提供多個屬性值，以逗號進行分隔。 

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/" />   
<title>螞蟻部落</title>  
<style type="text/css">  
div{ 
  width:100px; 
  height:100px; 
  background:red; 
  position:relative; 
     
  animation:theanimation infinite alternate; 
  animation-duration:8s;
} 
@keyframes theanimation{ 
  0%{top:0px;left:0px;background:red;} 
  25%{top:0px;left:100px;background:blue;} 
  50%{top:100px;left:100px;background:yellow;} 
  75%{top:100px;left:0px;background:green;} 
  100%{top:0px;left:0px;background:red;} 
} 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html>

以上程式碼設定動畫的時長為8秒。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>    
<html>    
<head>    
<meta charset=" utf-8">    
<meta name="author" content="http://www.softwhy.com/" />    
<title>螞蟻部落</title>   
<style type="text/css">   
div{  
  width:100px;  
  height:100px;  
  background:red;  
  position:relative;  
       
  animation:ant-1 infinite alternate,ant-2 infinite alternate;  
  animation-duration:5s,2s;   
} 
@keyframes ant-1{  
  0% {left:0px;}  
  100% {left:200px;}  
}  
 
@keyframes ant-2{  
  0% {top:0px;}  
  100% {top:200px;}  
}  
</style>  
</head>  
<body>  
<div></div>  
</body>  
</html>

以上程式碼使用animation-duration規定兩個動畫時長，分別用於兩個動畫。

相關文章