CSS3也有著非常強大的屬性，那就是過渡——Transition。過渡——Transition在W3C的描述：“css的transition允許css的屬性值在一定 的時間區間內平滑地過渡。這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發，并圓滑地以動畫效果改變CSS的屬性值。 ”既然CSS3的過渡這么強大，下面我們就一點一點掌握它吧?！ SS3中的過渡Transition有四個中心屬性：transition-property、transition-duration、transition-delay和transition-timing- function。 一、transition-property——指定要運動的樣式 1、transition-property的語法[css] transition-property :all(所有屬性改變) || [attr] (指定要運動的樣式)|| none(沒有屬性改變) 2、transition-property的屬性值 (1)none：transition馬上停止執行 (2)all：元素產生任何屬性值變化時都將執行transition效果 (3)attr：指定要運動的樣式 二、transition-duration transition-duration是指定元素轉換過程的持續時間，單位為秒(s)。transition-duration可以作用于所有元素，包括:before和:after 偽元素。其默認值是0，也就是變換時是即時的。 三、transition-delay—— 延遲時間 transition-delay是用來指定一個動畫開始執行的時間，也就是說當改變元素屬性值后多長時間開始執行transition效果，單位為s(秒) ，其使用和transition-duration極其相似，也可以作用于所有元素，包括:before和:after偽元素。 默認大小是"0"，也就是變換立即執行， 沒有延遲。 四、transition-timing-function——指定運動形式 transition-timing-function ： ease(逐漸變慢) | linear(勻速) | ease-in(加速) | ease-out(減速) | ease-in-out(先加速然后減 速) | cubic-bezier(該值允許你去自定義一個時間曲線)(number, number, number, number>) 五、transition的綜合寫法[css] 元素選擇器{transition:運動的樣式 持續時間 運動形式 延遲時間;} 六、transition的綜合兼容寫法 1、Mozilla內核[css] 元素選擇器{-moz-transition:運動的樣式 持續時間 運動形式 延遲時間;} 2、Webkit內核[css] 元素選擇器{-webkit-transition:運動的樣式 持續時間 運動形式 延遲時間;} 3、Opera內核[css] 元素選擇器{-o-transition:運動的樣式 持續時間 運動形式 延遲時間;} 4、W3C 標準[css] 元素選擇器{transition:運動的樣式 持續時間 運動形式 延遲時間;} 七、transition的小實例 CSS代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
#timings-demo {
border: 1px solid #ccc;
padding: 10px;
height: 400px;
width: 400px;
}
.box {
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
margin-bottom: 10px;
-webkit-border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(102, 153, 0, 0.5);
}
/*逐漸變慢效果：*/
#ease {
background: #f36;
-webkit-transition: all 5s ease 0.3s;
}
/*加速效果：*/
#ease-in {
background: #369;
-webkit-transition: all 3s ease-in 0.5s;
}
/*減速效果：*/
#ease-out {
background: #636;
-webkit-transition: all 5s ease-out 0s;
}
/*先加速然后減速效果：*/
#ease-in-out {
background: #3e6;
-webkit-transition: all 1s ease-in-out 2s;
}
/*勻速效果：*/
#linear {
background: #999;
-webkit-transition: all 6s linear 0s;
}
/*該值允許你去自定義一個時間曲線效果：*/
#cubic-bezier {
background: #6d6;
-webkit-transition: all 4s cubic-bezier 1s;
}
/*hover狀態下或單擊click按鈕后box產生屬性變化*/
#timings-demo:hover .box {
-webkit-transform: rotate(360deg) scale(1.2);
-webkit-border-radius: 25px;
}
</style>
<body>
<div id="timings-demo">
<div id="ease" class="box">Ease</div>
<div id="ease-in" class="box">Ease-in</div>
<div id="ease-out" class="box">Ease-out</div>
<div id="ease-in-out" class="box">Ease-in-out</div>
<div id="linear" class="box">Linear</div>
<div id="cubic-bezier" class="box">Cubic-bezier</div>
</div>
</body>
</html>
CSS3之過渡Transition就為大家介紹到這里了，CSS3之過渡Transition的神奇之處遠不止上面這些，還可以做很多好玩的小東西。在今后 ，想必CSS3之過渡Transition的應用會很廣泛，掌握CSS3之過渡Transition可謂是當務之急。
