CSS3過渡 transiti...LOGIN

CSS3過渡 transition-delay屬性

語法:

 transition-delay : <time> [, <time>]*

transition-delay是用來指定一個動畫開始執行的時間,也就是說當改變元素屬性值後多長時間開始執行transition效果,其取值:<time>為數值,單位為s(秒)或ms(毫秒),其使用和transition-duration極為相似,也可以作用於所有元素,包括:before和:after偽元素。 預設大小是"0",也就是變換立即執行,沒有延遲。

有時我們不只改變一個css效果的屬性,而是想改變兩個或多個css屬性的transition效果,那麼我們只要把幾個transition的聲明串在一起,用逗號(“,” )隔開,然後各自可以有各自不同的延續時間和其時間的速率變換方式。但需要值得注意的一點:transition-delay與transition-duration的值都是時間,所以要區分它們在連寫中的位置,一般瀏覽器會根據先後順序決定,第一個可以解析為時間的怭值為transition-duration第二個為transition-delay。如:

 a {    -moz-transition: background 0.5s ease-in,color 0.3s ease-out;
    -webkit-transition: background 0.5s ease-in,color 0.3s ease-out;
    -o-transition: background 0.5s ease-in,color 0.3s ease-out;
    transition: background 0.5s ease-in,color 0.3s ease-out;
  }

 

如果你想給元素執行所有transition效果的屬性,那麼我們還可以利用all屬性值來操作,此時他們共享同樣的延續時間以及速率變換方式,如:

 a {    -moz-transition: all 0.5s ease-in;
   -webkit-transition: all 0.5s ease-in;
   -o-transition: all 0.5s ease-in;
   transition: all 0.5s ease-in;
 }

 

綜合上述我們可以給transition一個速記法:transition: <property> <duration> <animation type> <delay>如下圖所示:


對應的範例程式碼:

p {  -webkit-transition: all .5s ease-in-out 1s;
 -o-transition: all .5s ease-in-out 1s;
 -moz-transition: all .5s ease-in-out 1s;
 transition: all .5s ease-in-out 1s;}

#程式碼實例:## 實例一:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.php.cn/" /> 
<title>php中文网</title> 
<style type="text/css"> 
#thediv{
  width:100px;
  height:100px;
  background:blue;
     
  transition-property:width,height;
  -moz-transition-property:width,height;
  -webkit-transition-property:width,height;
  -o-transition-property:width,height;
     
  transition-duration:2s;
  -moz-transition-duration:2s;
  -webkit-transition-duration:2s;
  -o-transition-duration:2s;
   
  transition-delay:2s;
  -moz-transition-delay:2s;
  -webkit-transition-delay:2s;
  -o-transition-delay:2s;
}
#thediv:hover{
  width:500px;
  height:200px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

以上程式碼中,滑鼠懸浮在div之上需要延遲兩秒再執行動畫效果。


實例二:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.php.cn/" /> 
<title>php中文网</title> 
<style> 
#thediv{
  width:100px;
  height:100px;
  background:blue;
     
  transition-property:width,height;
  -moz-transition-property:width,height;
  -webkit-transition-property:width,height;
  -o-transition-property:width,height;
     
  transition-duration:2s,6s;
  -moz-transition-duration:2s,6s;
  -webkit-transition-duration:2s,6s;
  -o-transition-duration:2s,6s;
   
  transition-delay:2s,6s;
  -moz-transition-delay:2s,6s;
  -webkit-transition-delay:2s,6s;
  -o-transition-delay:2s,6s;
}
#thediv:hover{
  width:500px;
  height:200px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

以上程式碼中,滑鼠懸浮於div之上的要分別延遲2秒和6秒才開始指向寬度和高度動畫轉場效果。

下一節

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.php.cn/" /> <title>php中文网</title> <style> #thediv{ width:100px; height:100px; background:blue; transition-property:width,height; -moz-transition-property:width,height; -webkit-transition-property:width,height; -o-transition-property:width,height; transition-duration:2s,6s; -moz-transition-duration:2s,6s; -webkit-transition-duration:2s,6s; -o-transition-duration:2s,6s; transition-delay:2s,6s; -moz-transition-delay:2s,6s; -webkit-transition-delay:2s,6s; -o-transition-delay:2s,6s; } #thediv:hover{ width:500px; height:200px; } </style> </head> <body> <div id="thediv"></div> </body> </html>
章節課件