CSS3也有著非常強(qiáng)大的屬性，那就是過(guò)渡——Transition吮便。過(guò)渡——Transition在W3C的描述：“css的transition允許css的屬性值在一定 的時(shí)間區(qū)間內(nèi)平滑地過(guò)渡笔呀。這種效果可以在鼠標(biāo)單擊、獲得焦點(diǎn)线衫、被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)凿可，并圓滑地以動(dòng)畫效果改變CSS的屬性值。 ”既然CSS3的過(guò)渡這么強(qiáng)大，下面我們就一點(diǎn)一點(diǎn)掌握它吧枯跑〔沂唬 CSS3中的過(guò)渡Transition有四個(gè)中心屬性：transition-property、transition-duration敛助、transition-delay和transition-timing- function粗卜。 一、transition-property——指定要運(yùn)動(dòng)的樣式 1纳击、transition-property的語(yǔ)法[css] transition-property :all(所有屬性改變) || [attr] (指定要運(yùn)動(dòng)的樣式)|| none(沒(méi)有屬性改變) 2续扔、transition-property的屬性值 (1)none：transition馬上停止執(zhí)行 (2)all：元素產(chǎn)生任何屬性值變化時(shí)都將執(zhí)行transition效果 (3)attr：指定要運(yùn)動(dòng)的樣式 二、transition-duration transition-duration是指定元素轉(zhuǎn)換過(guò)程的持續(xù)時(shí)間焕数，單位為秒(s)纱昧。transition-duration可以作用于所有元素，包括:before和:after 偽元素堡赔。其默認(rèn)值是0识脆，也就是變換時(shí)是即時(shí)的。 三善已、transition-delay—— 延遲時(shí)間 transition-delay是用來(lái)指定一個(gè)動(dòng)畫開(kāi)始執(zhí)行的時(shí)間灼捂，也就是說(shuō)當(dāng)改變?cè)貙傩灾岛蠖嚅L(zhǎng)時(shí)間開(kāi)始執(zhí)行transition效果，單位為s(秒) 换团，其使用和transition-duration極其相似悉稠，也可以作用于所有元素，包括:before和:after偽元素艘包。 默認(rèn)大小是"0"的猛，也就是變換立即執(zhí)行， 沒(méi)有延遲辑甜。 四衰絮、transition-timing-function——指定運(yùn)動(dòng)形式 transition-timing-function ： ease(逐漸變慢) | linear(勻速) | ease-in(加速) | ease-out(減速) | ease-in-out(先加速然后減 速) | cubic-bezier(該值允許你去自定義一個(gè)時(shí)間曲線)(number, number, number, number>) 五、transition的綜合寫法[css] 元素選擇器{transition:運(yùn)動(dòng)的樣式 持續(xù)時(shí)間 運(yùn)動(dòng)形式 延遲時(shí)間;} 六磷醋、transition的綜合兼容寫法 1猫牡、Mozilla內(nèi)核[css] 元素選擇器{-moz-transition:運(yùn)動(dòng)的樣式 持續(xù)時(shí)間 運(yùn)動(dòng)形式 延遲時(shí)間;} 2、Webkit內(nèi)核[css] 元素選擇器{-webkit-transition:運(yùn)動(dòng)的樣式 持續(xù)時(shí)間 運(yùn)動(dòng)形式 延遲時(shí)間;} 3邓线、Opera內(nèi)核[css] 元素選擇器{-o-transition:運(yùn)動(dòng)的樣式 持續(xù)時(shí)間 運(yùn)動(dòng)形式 延遲時(shí)間;} 4淌友、W3C 標(biāo)準(zhǔn)[css] 元素選擇器{transition:運(yùn)動(dòng)的樣式 持續(xù)時(shí)間 運(yùn)動(dòng)形式 延遲時(shí)間;} 七、transition的小實(shí)例 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;
}
/*該值允許你去自定義一個(gè)時(shí)間曲線效果：*/
#cubic-bezier {
background: #6d6;
-webkit-transition: all 4s cubic-bezier 1s;
}
/*hover狀態(tài)下或單擊click按鈕后box產(chǎn)生屬性變化*/
#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之過(guò)渡Transition就為大家介紹到這里了骇陈，CSS3之過(guò)渡Transition的神奇之處遠(yuǎn)不止上面這些震庭，還可以做很多好玩的小東西。在今后 你雌，想必CSS3之過(guò)渡Transition的應(yīng)用會(huì)很廣泛器联，掌握CSS3之過(guò)渡Transition可謂是當(dāng)務(wù)之急二汛。
