CSS3過渡效果（css3 transition）

一、

CSS 過渡（transition）是通過定義元素從 起點的狀態 和 結束點的狀態，在一定的時間區間內實現元素平滑地過渡或變化 的一種補間動畫機制。你可以讓屬性的改變過程持續一段時間，而不是立即生效。

通過transition你可以決定哪個屬性發生動畫效果 (可以通過明確地列出這些屬性)，何時開始動畫 (通過設定delay), 動畫持續多久 (通過設定duration), 以及如何動畫 (通過定義timing函式，比如線性地或開始快結尾慢)。

如何定義transition（過渡）

Transition又包含了四個子屬性，分別為：

• transition-property,變換延續的時間：
• transition-duration,在延續時間段，
• transition-timing-function,變換的速率變化
• transition-delay：變換延遲時間

二、

CSS3的過渡效果，讓一個元素從一種效果轉換到另一種效果。
要做到這一點，你必須指定兩件事：

1. 指定要新增效果的CSS屬性
2. 指定效果的持續時間。

舉例說明：

    div
    {
    transition: width 2s;
    -moz-transition: width 2s; /* Firefox 4 */
    -webkit-transition:
 
 width 2s; /* Safari and Chrome */
    -o-transition: width 2s; /* Opera */
    }

注意：如果未指定動畫延遲時間，過渡將沒有任何效果，因為預設值是0。

滑鼠放上去的時候，變換開始：

    div:hover
    {
    width:300px;
    }

三、

如何執行動畫效果？（在哪裡定義動畫效果？）

css3動畫一般通過滑鼠事件或者滑鼠狀態定義動畫，通常我們可以用CSS中偽類、使用js修改元素的樣式屬性或追加刪除樣式來執行定義的動畫。通常我們可以用CSS中偽類和js中的滑鼠事件來定義，CSS中偽類執行動畫包括：

上面的例子就是使用CSS中偽類執行動畫的。   使用js修改元素的樣式屬性或追加刪除樣式來執行動畫： 一般是滑鼠事件操作和定時操作（window.setTimeout()，window.setInterval()）；

還應注意當一個元素使用過渡（transition）後，立即使用.appendChild()將其加入到DOM中或刪除其display: none;。這被視為如果初始狀態從來沒有存在過那麼元素總是在它的最終狀態。克服這個限制最簡單的辦法是使用極少毫米數的window.setTimeout()。

js的事件也可以，比如click，focus，mousemove,mouseover,mouseout等等

四、

transition的基本語法：

css3動畫通過transition屬性和其他css屬性（顏色，寬高，變形，位置等等）配合來實現。

1、transition-property（過渡屬性）

1. 可以單獨指定元素哪些屬性改變時執行過渡（transition），可以觸發瀏覽器reflow或repaint的屬性那些CSS屬性可以應用動畫，可參見：https://developer.mozilla.org/zh-CN/docs/CSS/CSS_animated_properties這裡列出所有的CSS屬性，如果可以做動畫，那麼會說明是如何設定。
2. 可以指定為all，元素任何可過渡（transition）屬性值變化時都將執行過渡（transition）效果。
3. 可以指定為none時，動畫立即停止。
4. 初始預設值為all

transition-property:要變化的屬性，比如元素變寬則是width，文字顏色要變色這是W3C給出了一個可變換屬性的列表：

幾乎所有的有色彩、大小或位置等元件的CSS屬性，包括許多新新增的CSS3屬性， 都可以應用變換。一個值得注意的例外是box-shadow，不過部分瀏覽器還是對box-shadow添加了支援。

該取值還有個強大的“all”取值，表示上表所有屬性；

除了以上屬性外，當然還有css3中大放異彩的css3變形，比如放大縮小，旋轉斜切，漸變等等。

2、

transition-duration（過渡持續時間）

transition-duration ：<time> [, <time>]*

transition-duration ：動畫執行的時間，以秒為單位，比如0.1秒可以寫成”0.1s”或者”.1s”，注意後面有個“s”單位

1. 用來指定元素過度過程的持續時間，時間值，1s(秒)，4000ms(毫秒)。
2. 其預設值是0s，也可以理解為無過渡（transition）效果。

3、動畫執行的計算方式

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 ：（過渡時間函式）動畫執行的計算方式，這裡時間函式是令人崩潰的貝塞爾曲線，幸好

指定CSS屬性的變換速率，預設的有：ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2)，預設值時easy：ease：（逐漸變慢）預設值，等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0).          linear：（勻速），等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0).    ease-in：(加速)，等同於貝塞爾曲線(0.42, 0, 1.0, 1.0).                                ease-out：（減速），等同於貝塞爾曲線(0, 0, 0.58, 1.0)   ease-in-out：（加速然後減速），等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)                                                                                                cubic-bezier為通過貝塞爾曲線來計算“轉換”過程中的屬性值，如下曲線所示，通過改變P1(x1, y1)和P2(x2, y2)的座標可以改變整個過程的Output Percentage。w3c文件中表述是所有值需在[0, 1]區域內，否則無效。但一些瀏覽器下對此沒有限制

4、動畫延遲

transition-delay ： <time> [, <time>]*

transition-delay：在動作和變換開始之間等待多久，通常用秒來表示(比如, .1s)。如果你不想延遲，該值可省略。

指定一個動畫開始執行的時間，即當改變元素屬性值後多長時間開始執行“轉換效果”，初始預設值為0；
例如:

5、重疊動畫

經常會碰到同一元素會有多個動畫同時執行的時侯，比如文字顏色和背景同時變化：

-webkit-transition: color .25s linear , background-color 1s linear;

6、和transform(變形)結合的一些動畫

這時候transition-property建議取值為“all”；

典型的應用舉例：

放大縮小：

#scale { -webkit-transition: all .3s ease-in-out; }

#scale:hover { -webkit-transform: scale(1.5); }

旋轉：

#rotate { -webkit-transition: all 1s ease-in-out;}

#rotate:hover {-webkit-transform: rotate(720deg);}

transition和animation的區別：

1. transition完成後會保留過渡後的狀態，而animation會跳至預設狀態
2. 後者更精細，具體到每一禎都可以控制，而前者是平滑過渡。