CSS3過渡
CSS3過渡，您可以平滑地改變屬性值（從一個值到另一個），在給定的時間。
例如：將鼠標懸停在元素的下面看到一個CSS3過渡效果：
CSS3
對於轉換瀏覽器支持
在表中的數字規定，完全支持該屬性的第一個瀏覽器版本。
其次通過數字-webkit-, -moz- ，或-o-指定用一個前綴工作的第一個版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| transition | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-delay | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-duration | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-property | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-timing-function | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
如何使用CSS3過渡？
要創建一個過渡效果，你必須指定兩件事：
- 要添加效果的CSS屬性
- 的效果的持續時間
注意：如果未指定的持續時間的一部分，則該過渡將是無效的，因為默認值是0。
下面的例子顯示了100px * 100px紅色<div>元素。 該<div>元素也指定了width屬性轉換效果，2秒的持續時間：
例
div
{
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
}
當指定的CSS屬性（寬度）值改變的過渡效果將開始。
現在，讓我們為width屬性指定一個新值，當用戶將鼠標移動到<div>元素：
請注意，當光標鼠標出來的元素，它會逐漸變回其原有的風格。
更改多個屬性值
下面的示例中增加了寬度和高度都物業的過渡效果，以2秒的寬度和4秒鐘的高度持續時間：
例
div
{
-webkit-transition: width 2s, height 4s; /*
Safari */
transition: width 2s, height 4s;
}
試一試» 指定過渡的速度曲線
在transition-timing-function屬性指定的過渡效果的速度曲線。
過渡定時功能屬性可以具有以下值：
-
ease-指定一個緩慢的開始的過渡效果，那麼快的話，慢慢的結束（這是默認） -
linear-指定與從開始以相同的速度來結束過渡效果 -
ease-in-指定一個緩慢的開始的過渡效果 -
ease-out-指定一個緩慢的結束轉場效果 -
ease-in-out-指定一個緩慢的開始和結束的過渡效果 -
cubic-bezier(n,n,n,n)-讓你在定義你自己的價值觀cubic-bezier函數
下面的例子示出了一些可用於不同的速度曲線：
例
#div1 {transition-timing-function: linear;}
#div2
{transition-timing-function: ease;}
#div3 {transition-timing-function:
ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5
{transition-timing-function: ease-in-out;} 試一試» 拖延過渡效果
在transition-delay屬性指定為過渡效果的延遲（以秒為單位）。
下面的例子有起動前1秒鐘的延遲：
過渡轉型+
下面的例子還增加了一個轉型的過渡效果：
例
div {
-webkit-transition: width 2s, height
2s, -webkit-transform 2s; /* Safari */
transition:
width 2s, height 2s, transform 2s;
} 試一試» 更多轉換示例
CSS3的過渡性質，可以指定一個接一個，像這樣：
例
div
{
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
試一試» 或使用速記屬性transition ：
自測練習用！
CSS3轉換屬性
下表列出了所有過渡屬性：
| 屬性 | 描述 |
|---|---|
| transition | 簡寫屬性設置四個轉變特性成一個單一的財產 |
| transition-delay | 指定的遷移效果的延遲（秒） |
| transition-duration | 指定過渡效果多少秒或毫秒需要完成 |
| transition-property | 指定CSS屬性的過渡效果是名 |
| transition-timing-function | 指定的過渡效果的速度曲線 |