CSS3與濾境(11)-轉換動畫

CSS3增加了動畫效果的設定。動畫設定的方式主要分成兩種:「轉換動畫」以及「影格動畫」。轉換動畫是指當事件(event)產生時,物件會從原本的樣式(style)轉換成另一種新的樣式。在CSS裡的事件定義是〝當CSS屬性改變時〞,因此典型的事件是滑鼠移動或點擊(請參考「套用規則>特殊狀態的應用」)。要完成轉換動畫,必需指定兩件事情:想要添加的CSS效果、效果持續的時間。如果不指定時間,是不會產生任何效果的,因為它的預設值是0。

屬性名稱

transition(轉換動畫):transition-property(指定屬性)、transition-duration(執行時間)、transition-timing-function(速度設定)、transition-delay(延遲時間)

transition

說明:設定轉換動畫。由transition-property、transition-duration、transition-timing-function、transition-delay四個屬性組成。當指定屬性有2個以上時,可以逗號分隔。範例結果請參考這裡

屬性值:transition-property transition-duration transition-timing-function transition-delay

【範例】

#box1 {
    width:100px;
    height:100px;
    background:Orange;

    transition:width 2s, height 2s, transform 5s;           /* 不支援IE瀏覽器 */
    -moz-transition:width 2s, height 2s, -moz-transform 5s;     /* Firefox 使用的語法 */
    -webkit-transition:width 2s, height 2s, -webkit-transform 5s;   /* Chrome、Safari 使用的語法 */
    -o-transition:width 2s, height 2s, -o-transform 5s;     /* Opera 使用的語法 */
}
#box1:hover {
    width:200px;
    height:200px;

    transform:rotate(180deg);       /* 不支援IE8以前瀏覽器 */
    -ms-transform:rotate(180deg);       /* IE9 使用的語法 */
    -moz-transform:rotate(180deg);      /* Firefox 使用的語法 */
    -webkit-transform:rotate(180deg);   /* Chrome、Safari 使用的語法 */
    -o-transform:rotate(180deg);        /* Opera 使用的語法 */
}

transition-delay

說明:指定轉換動畫的延遲時間,表示當事件產生時,要停留幾秒才開始進行動畫。範例結果請參考這裡

屬性值:(時間,預設值0,單位s秒或ms毫秒)

【範例】

#box3 {
    width:100px;
    height:100px;
    background:green;

    transition-property: width;     /* 不支援IE瀏覽器 */
    transition-duration: 2s;        /* 不支援IE瀏覽器 */
    -moz-transition-property: width;    /* Firefox 使用的語法 */
    -moz-transition-duration: 2s;       /* Firefox 使用的語法 */
    -webkit-transition-property: width; /* Chrome、Safari 使用的語法 */
    -webkit-transition-duration: 2s;    /* Chrome、Safari 使用的語法 */
    -o-transition-property: width;      /* Opera 使用的語法 */
    -o-transition-duration: 2s;     /* Opera 使用的語法 */

    transition-delay: 2s;       /* 不支援IE瀏覽器 */
    -moz-transition-delay: 2s;  /* Firefox 使用的語法 */
    -webkit-transition-delay: 2s;   /* Chrome、Safari 使用的語法 */
    -o-transition-delay: 2s;    /* Opera 使用的語法 */
}
#box3:hover { width:300px; }

transition-duration

說明:指定轉換動畫持續的時間,表示動畫開始到結束所花費的時間。為0時表示不進行動畫。此屬性不提供範例結果,請參照其它關聯屬性。

屬性值:(時間,預設值0,單位s秒或ms毫秒)

【範例】

.box {
    transition-duration: 2s;        /* 不支援IE瀏覽器 */
    -moz-transition-duration: 2s;       /* Firefox 使用的語法 */
    -webkit-transition-duration: 2s;    /* Chrome、Safari 使用的語法 */
    -o-transition-duration: 2s;     /* Opera 使用的語法 */
}

transition-property

說明:指定進行轉換動畫的CSS屬性名稱。當被指定的屬性改變時,轉換動畫會開始執行。transition-duration仍然要指定,否則轉換時間為0時不會產生任何效果。範例結果請參考這裡

屬性值:none(不轉換)、all(所有屬性)、(屬性名稱)

【範例】

#box2 {
    width:100px;
    height:100px;
    background:yellow;

    transition-property: width;     /* 不支援IE瀏覽器 */
    transition-duration: 5s;        /* 不支援IE瀏覽器 */
    -moz-transition-property: width;    /* Firefox 使用的語法 */
    -moz-transition-duration: 5s;       /* Firefox 使用的語法 */
    -webkit-transition-property: width; /* Chrome、Safari 使用的語法 */
    -webkit-transition-duration: 5s;    /* Chrome、Safari 使用的語法 */
    -o-transition-property: width;      /* Opera 使用的語法 */
    -o-transition-duration: 5s;     /* Opera 使用的語法 */
}
#box2:hover { width:300px; }

transition-timing-function

說明:在轉換動畫執行的期間內,細部指定其動畫的速度。範例結果請參考這裡

屬性值:

  • linear:表示從開始到結束的速度一致。相當於cubic-bezier(0,0,1,1)。
  • ease:緩慢的開始,中間變快,又變慢慢結束。相當於cubic-bezier(0.25,0.1,0.25,1)。
  • ease-in:緩慢的開始。相當於cubic-bezier(0.42,0,1,1)。
  • ease-out:緩慢的結束。相當於cubic-bezier(0,0,0.58,1)。
  • ease-in-out:緩慢的開始和結束。相當於cubic-bezier(0.42,0,0.58,1)。
  • cubic-bezier(n,n,n,n):自由定義cubic-bezier函數,每個值為0到1之間的數字。

【範例】

#box4 {
    width:100px;
    height:100px;
    background:blue;

    transition-property: width;     /* 不支援IE瀏覽器 */
    transition-duration: 5s;        /* 不支援IE瀏覽器 */
    -moz-transition-property: width;    /* Firefox 使用的語法 */
    -moz-transition-duration: 5s;       /* Firefox 使用的語法 */
    -webkit-transition-property: width; /* Chrome、Safari 使用的語法 */
    -webkit-transition-duration: 5s;    /* Chrome、Safari 使用的語法 */
    -o-transition-property: width;      /* Opera 使用的語法 */
    -o-transition-duration: 5s;     /* Opera 使用的語法 */

    transition-timing-function: linear;     /* 不支援IE瀏覽器 */
    -moz-transition-timing-function: linear;    /* Firefox 使用的語法 */
    -webkit-transition-timing-function: linear; /* Chrome、Safari 使用的語法 */
    -o-transition-timing-function: linear;      /* Opera 使用的語法 */
}
#box4:hover { width:300px; }