CSS3過(guò)渡 transition-timing-function屬性
三、transition-timing-function:
語(yǔ)法：
transition-timing-function ： ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*
取值：
transition-timing-function的值允許你根據(jù)時(shí)間的推進(jìn)去改變屬性值的變換速率，transition-timing-function有6個(gè)可能值：
1、ease：（逐漸變慢）默認(rèn)值，ease函數(shù)等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0).
2、linear：（勻速），linear 函數(shù)等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0).
3、ease-in：(加速)，ease-in 函數(shù)等同于貝塞爾曲線(0.42, 0, 1.0, 1.0).
4、ease-out：（減速），ease-out 函數(shù)等同于貝塞爾曲線(0, 0, 0.58, 1.0).
5、ease-in-out：（加速然后減速），ease-in-out 函數(shù)等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)
6、cubic-bezier：（該值允許你去自定義一個(gè)時(shí)間曲線）， 特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個(gè)值特定于曲線上點(diǎn)P1和點(diǎn)P2。所有值需在[0, 1]區(qū)域內(nèi)，否則無(wú)效。
其是cubic-bezier為通過(guò)貝賽爾曲線來(lái)計(jì)算“轉(zhuǎn)換”過(guò)程中的屬性值，如下曲線所示，通過(guò)改變P1(x1, y1)和P2(x2, y2)的坐標(biāo)可以改變整個(gè)過(guò)程的Output Percentage。初始默認(rèn)值為default.
其他幾個(gè)屬性的示意圖：
代碼實(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-property:width,height;
-moz-transition-property:width,height;
-webkit-transition-property:width,height;
-o-transition-property:width,height;
transition-duration:2s,6s;
-moz-transition-duration:2s,6s;
-webkit-transition-duration:2s,6s;
-o-transition-duration:2s,6s;
transition-timing-function:ease-in,linear;
-moz-transition-timing-function:ease-in,linear;
-webkit-transition-timing-function:ease-in,linear;
-o-transition-timing-function:ease-in,linear;
}
#thediv:hover{
width:500px;
height:200px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>
