CSS3 漸變效果- Transition
CSS3可以用來做簡單的動畫效果，效能還比用javascript好，只不過我會覺得程式跟樣式還是分開可能比較好，不過多學一種東西可以多一種選擇也不錯。
基本的用法是如以下，先在DOM上指定變型的參數，然後在擬態上(:hover, :active...)上填上改變後的值，就會有漸變效果了。
或者使用
<
可以做一些進階的設定：
transition-property: 設定要漸變的屬性，如: width, background... 等，如果沒有寫就是對全部屬性都設定漸變。
transition-duration: 漸變時間。
transition-timing-function: 漸變的時間函數，預設是ease，意思是在起始跟結束的時候會有和緩的效果，可以設為"linear"，從頭到尾變型的速度就都一樣，另外還有ease-in、ease-out、ease-in-out可以設。另外還有自訂 cubic-bazier 可以設定，藉由這個網站試著自訂一個想要的效果再放到頁面上看看。
transition-delay: 漸變延遲開始時間。
然後可以如同以下合起來用。
W3schools有詳細的說明跟範例
基本的用法是如以下，先在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有詳細的說明跟範例
留言