CSS3 漸變效果- Transition

CSS3可以用來做簡單的動畫效果，效能還比用javascript好，只不過我會覺得程式跟樣式還是分開可能比較好，不過多學一種東西可以多一種選擇也不錯。

基本的用法是如以下，先在DOM上指定變型的參數，然後在擬態上(:hover, :active...)上填上改變後的值，就會有漸變效果了。
transition: width 2s;第一個參數是要變型的部分，第二個參數是變型的時間，並非所有的CSS值都可以漸變，這篇文章有列出可以漸變的值，可以測試看看。

div:hover
{
width:300px;
} 

然後在hover的時候改變數值就可以有動畫的效果了。

transition: width 2s, height 2s, transform 2s;

可以合在一起使用。

或者使用

all 2s

就可以不用個別設了。

<

div:hover

{

width:200px;

height:200px;

transform:rotate(180deg);

-moz-transform:rotate(180deg); /* Firefox 4 */

-webkit-transform:rotate(180deg); /* Safari and Chrome */

-o-transform:rotate(180deg); /* Opera */

}

可以做一些進階的設定：
transition-property: 設定要漸變的屬性，如: width, background... 等，如果沒有寫就是對全部屬性都設定漸變。
transition-duration: 漸變時間。
transition-timing-function: 漸變的時間函數，預設是ease，意思是在起始跟結束的時候會有和緩的效果，可以設為"linear"，從頭到尾變型的速度就都一樣，另外還有ease-in、ease-out、ease-in-out可以設。另外還有自訂 cubic-bazier 可以設定，藉由這個網站試著自訂一個想要的效果再放到頁面上看看。
transition-delay: 漸變延遲開始時間。

然後可以如同以下合起來用。
transition: width 1s linear 2s;


W3schools有詳細的說明跟範例