CSS3 過渡屬性
W3C標準中對css3的transition這是樣描述的：「css的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在滑鼠點擊、獲得焦點、被點擊或對元素任何改變中觸發，並圓滑地以動畫效果改變CSS的屬性值。 CSS Transition。
CSS3的過渡效果，讓一個元素從一種效果轉換到另一種效果，要做到這一點，你必須指定兩件事和指定效果的持續時間。 例如：
#transition: width 2s;
#-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chr
##-o-transition: width 2s; /* Opera */
}
注意：若未指定動畫延遲時間，過渡將沒有任何效果，因為預設值是0。
滑鼠放上去的時候，變換開始：#.className:hover{width:300px;}
#
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
body{background:#eee;}
*{margin:0; padding:0; font-family:Arial,"微软雅黑"; cursor:default;}
.wrap{margin:100px;}
.wrap{transition:background 0.5s ease-in-out; width:100px; height:100px; background:#92B901; border-radius:5px;}
.wrap:hover{background:#FFC631;}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
</html> 樣式改變
#<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
.box{width:100px;height:100px;background:red;
transition:1s width,2s height,3s background;}
.box:hover{width:500px;height:300px;background:blue;}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>過渡屬性下表列出了所有的過渡屬性:
屬性
說明 #transition 簡寫屬性，用於在一個屬性中設定四個過渡屬性。 3
transition-property 規定應用過渡的 CSS 屬性的名稱。 3
transition-duration 定義過渡效果所花費的時間。預設是 0。 3
transition-timing-function 規定過渡效果的時間曲線。預設是 "ease"。 3
transition-delay 規定過渡效果何時開始。預設是 0。 3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div
{
width:100px;
height:100px;
background:yellow;
transition:width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>需要鼠标在图片上面悬停2秒才显示效果</p>
</body>
</html>
