2012年1月31日 星期二

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: 設定要變型的項目。
transition-duration: 變型時間。
transition-timing-function: 變型的效果,預設是ease,意思是在起始跟結束的時候會有和緩的效果,可以設為"linear",從頭到尾變型的速度就都一樣,另外還有ease-in、ease-out、ease-in-out可以設。
transition-delay: 變型延遲開始時間。

然後可以如同以下合起來用。
transition: width 1s linear 2s;
W3schools有詳細的說明跟範例
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...