CSS3 animation-delay

admin發表於2018-09-06
CSSS3

animation-delay屬性設定animation動畫開始播放的延遲時間。

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

語法結構:

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

引數解析:

time:規定動畫開始播放的延遲時間，單位為秒（s）；可以是負數，使動畫跳過指定的時間。

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

瀏覽器支援：

（1）.IE10+瀏覽器支援此屬性。

（2）.edge瀏覽器支援此屬性。

（3）.谷歌瀏覽器支援此屬性。

（4）.火狐瀏覽器支援此屬性。

（5）.safria瀏覽器支援此屬性。

（6）.opera瀏覽器支援此屬性。

程式碼例項:

[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 5s infinite;    
  animation-delay:2s; 
}  
@keyframes theanimation{  
  0% {left:0px;}  
  100% {left:200px;}  
}    
</style>  
</head>  
<body>  
<div></div>  
</body>  
</html>

以上程式碼可以設定動畫延遲兩秒後再開始執行。

[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 5s infinite alternate,ant-2 2s infinite alternate;   
  animation-delay:2s,5s;

}  
@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>

以上程式碼可以分別設定動畫延遲2秒和5秒後開始執行。

[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;
  position: absolute;
}
.a{
  background-color: blue;
  top: 250px;
  animation: move 4s;
}
.b{
  background-color: green;
  top: 350px;
  animation: move 4s -3s;
}
@keyframes move{
  0%{
    left: 0;
  }
  100%{
    left: 500px;
  }
}
</style>
</head>
<body>
  <div class="a"></div>
  <div class="b"></div>
</body>
</html>

上面的程式碼中，第二個div元素延遲時間是-3（當然這裡採用複合寫法），那麼動畫會立刻開始，但是前三秒的動畫不會執行而是執行3-4秒之間的動畫。

相關文章