CSS3 過渡屬性
W3C標準中對css3的transition這是樣描述的：“css的transition允許css的屬性值在一定的時間區(qū)間內(nèi)平滑地過渡。這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發(fā)，并圓滑地以動畫效果改變CSS的屬性值?！?br/>css3過渡（CSS Transition）讓動畫變的生動更逼真，一起來學習一下CSS Transition。
它是如何工作？
CSS3的過渡效果，讓一個元素從一種效果轉換到另一種效果，要做到這一點，你必須指定兩件事和指定效果的持續(xù)時間。
例如：
.className{
transition:?width?2s;
-moz-transition:?width?2s;?/*?Firefox?4?*/
-webkit-transition:?width?2s;?/*?Safari?and?Chrome?*/
-o-transition:?width?2s;?/*?Opera?*/
}
?注意：如果未指定動畫延遲時間，過渡將沒有任何效果，因為默認值是0。
鼠標放上去的時候，變換開始：
.className:hover{width:300px;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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中文網(wǎng)(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>過渡屬性
下表列出了所有的過渡屬性:
屬性 ? ? ? ? ? ? ? ??描述 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??CSS
transition ? ?簡寫屬性，用于在一個屬性中設置四個過渡屬性。 ? ?3 ? ?
transition-property ? ?規(guī)定應用過渡的 CSS 屬性的名稱。 ? ?3 ? ?
transition-duration ? ?定義過渡效果花費的時間。默認是 0。 ? ?3 ? ?
transition-timing-function ? ?規(guī)定過渡效果的時間曲線。默認是 "ease"。 ? ?3 ? ?
transition-delay ? ?規(guī)定過渡效果何時開始。默認是 0。 ? ?3 ? ?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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>
