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有詳細的說明跟範例

留言

熱門文章