CSS3 過渡
CSS3的transition允許CSS的屬性值在一定的時間區間內平滑地過渡。這種效果可以在鼠標單擊，獲得焦點，被點擊或對元素任何改變中觸發，並平滑地以動畫效果改變CSS的屬性值。
transition:[<transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>]
transition-property：指定過渡的CSS屬性。
transition-duration：指定完成過渡所需的時間。
transition-timing-function：指定過渡調速函數。
transition -delay：指定過渡開始出現的延遲時間。
transition屬性類似於border，font這些屬性，可以簡寫，也可以單獨來寫。簡寫時，各函數之間用空格隔開，且需要按一定的順序排列。另外，作用於多個過渡屬性時，中間用逗號隔開。如下：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
width:50px;
height:100px;
background:#ffd800;
/*分開使用transition的擴展屬性*/
transition-property:width,height,background;
transition-duration:1s;
transition-timing-function:ease;
transition-delay:.2s;
/*使用transition簡寫屬性*/
transition:width 1s ease .2s,height 1s ease .2s,background 1s ease .2s;
}
div:hover{
width:100px;
height:50px;
background:#00ff90;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
transition-property語法：
transition-property:no | all | <single-transition-property> [, <single-transition-property>] *
none：沒有指定任何樣式。
all：默認值，表示指定元素所有支持transition-property屬性的樣式。
<single-transition-property>：指定一個或多個樣式。
並不是所有樣式都能應用transition-property進行過渡，只有具有一個中點值的樣式才能具備過渡效果，如顏色，長度，漸變等。
transition-duration語法
transition-duration:<time> [,<time>] *
<time>為數值，單位為s(秒)或ms(毫秒)，默認值是0。當有多個過渡屬性時，可以設置多個過渡時間分別應用過渡屬性，也可以設置一個過渡時間應用所有過渡屬性。
transition-timing-function語法
transition-timing-function:<single-transition-timing-function> [,<single-transition-timing-function>] *
單一的過渡函數
<single-transition-timing-function>指單一的過渡函數，主要包括下面幾個屬性值。
ease：默認值，元素樣式從初始狀態過渡到終止狀態時速度由快到慢，逐漸變慢。
linear：元素樣式從初始狀態過渡到終止狀態速度是恆速。
ease-in：元素樣式從初始狀態過渡到終止狀態時，速度越來越快，呈一種加速狀態。這種效果稱為漸顯效果。
ease-out：元素樣式從初始狀態過渡到終止狀態時，速度越來越慢，呈一種減速狀態。這種效果稱為漸隱效果。
ease-in-out：元素樣式從初始狀態到終止狀態時，先加速再減速。這種效果稱為漸顯漸隱效果。
三次貝塞爾曲線：用來定義精確度更高的過渡函數。
定義三次貝賽爾曲線的語法如下：
cubic-bezier(p0,p1,p2,p3)
每個點值只允許0~1的值，相當於0%到100%，p0與p3的值固定的，他們始終代表起點坐標(0,0)與終點坐標(1,1)。因此只需要設置p1,p2的點值就行了。
可以用在線的三次貝塞爾工具模擬並實現。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
width:50px;
height:100px;
background:#ffd800;
transition-property:width,height,background;
transition-duration:1s;
/*定義了三次貝塞爾曲線函數，p1的坐標是(.57,.07),p2的坐標是(.69,.16)*/
transition-timing-function:cubic-bezier(.57,.07,.69,.16);
transition-delay:.2s;
}
div:hover{
width:100px;
height:50px;
background:#00ff90;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
steps()函數：用於把整個操作領域划成同樣大小的間隔，每個間隔都是相等的。
steps(<integer> [, [start | end]]?)
第一個參數是一個數值，主要用來指定steps()函數的間隔數量，此值必須是一個大於0的正整數。
第二個參數是可選的，默認值為end。
transition-timing-function：steps（3，start）；
表示分3個步驟，動畫的步驟效果從每步的開始時跳，所以步驟是3/1, 3/2, 3/3。
transition-timing-function：steps（3，end）；
表示分3個步驟，動畫的步驟效果從每步的結束時跳，所以步驟是0, 3/1, 3/2。
transition-delay語法
transition-delay:<time> [, <time>] *
transition-delay：用來指定一個動畫開始執行的時間，也就是說當改變元素屬性值后多長時間開始執行過渡效果，它可以是正整數，負整數和0，非零的時候必須將單位設置為s(秒)或ms(毫秒)。
正整數時好理解，就是延遲幾秒開始執行過渡，負整數時，將元素的之前時間截斷，也就是transition-duration過渡時間所用的值減去transition-delay的延遲值，這中間的值不會發生，直接跳到剩下的值進行過渡。
CSS3過渡的基礎知識你已經掌握了，簡單來說就是一個屬性四個值，接下來只需要打幾遍代碼，體會一下各值效果，就可以融會貫通了。