CSS3過(guò)渡transition
SS3的transition屬性詳解:
本章節(jié)介紹一下transition屬性的用法，它也是與動(dòng)畫(huà)相關(guān)的一個(gè)屬性。
一.基本知識(shí):
transition翻譯成漢語(yǔ)具有"過(guò)渡"的意思，也就是說(shuō)可以讓一個(gè)元素的css屬性值在一定時(shí)間段內(nèi)進(jìn)行平滑的過(guò)渡。
此屬性和border、background等屬性一樣是復(fù)合屬性。
語(yǔ)法結(jié)構(gòu):
transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]
參數(shù)解釋:
1.transition-property:設(shè)置或者檢索參與過(guò)渡的屬性。
2.transition-duration: 檢索或設(shè)置對(duì)象過(guò)渡的持續(xù)時(shí)間。
3.transition-timing-function:檢索或設(shè)置對(duì)象中過(guò)渡的動(dòng)畫(huà)類型。
4.transition-delay:檢索或設(shè)置對(duì)象延遲過(guò)渡的時(shí)間。
代碼實(shí)例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ipnx.cn/" />
<title>php中文網(wǎng)</title>
<style>
#thediv{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s;
-webkit-transition:width 2s;
-o-transition:width 2s;
}
#thediv:hover{
width:500px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>以上代碼演示如何在兩秒內(nèi)將div的寬度以動(dòng)畫(huà)的效果從100px設(shè)置為500px。
既然是復(fù)合屬性，那么自然就可以將屬性分開(kāi)分別設(shè)置
