CSS3與濾境(12)-影格動畫

所謂的影片或是動畫,其實是由很多靜態的影像連續播放而成。

「影格」就是指我們在編輯Flash或是影片時,時間軸上一格一格的格子。CSS3提供了一些語法,讓我們除了使用GIF、Flash等動外外,也可以使用CSS做簡易的影格動畫。影格動畫的設定由 @keyframes 來完成,再透過 animation 屬性把動畫與物件連結。目前 IE 和 Opera 瀏覽器都不支援。

屬性名稱

@keyframes(影格動畫)

animation(動畫設定):animation-name(動畫名稱)、animation-duration(動畫時間)、animation-timing-function(動畫速度)、animation-delay(動畫延遲)、animation-iteration-count(播放次數)、animation-direction(動畫週期)、animation-play-state(播放狀態)

@keyframes

說明:建立與設定影格動畫。範例結果請參考這裡

屬性值:

  • animationname:必要屬性,動畫名稱。
  • keyframes-selector:必要屬性,影格設定。可為0%-100%、from(=0%)、to(=100%)。
  • css-styles:必要屬性,播放該影格時所呈現的CSS格式。

【範例】

@keyframes MyMove {     /* 不支援IE與Opera瀏覽器 */
    from {left:0px;}
    to {left:200px;}
}
@-moz-keyframes MyMove {    /* Firefox 使用的語法 */
    from {left:0px;}
    to {left:200px;}
}
@-webkit-keyframes MyMove { /* Chrome、Safari 使用的語法 */
    from {left:0px;}
    to {left:200px;}
}

#box5 {
    width:100px;
    height:100px;
    background:red;
    position:relative;

    animation:MyMove 5s;        /* 不支援IE與Opera瀏覽器 */
    -moz-animation:MyMove 5s;   /* Firefox 使用的語法 */
    -webkit-animation:MyMove 5s;    /* Chrome、Safari 使用的語法 */
}

animation

說明:指定套用的動畫名稱、動畫時間、速度、延遲、播放次數、週期。範例結果請參考這裡

屬性值:animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction

【範例】

#box5 {
    width:100px;
    height:100px;
    background:red;
    position:relative;

    animation:MyMove 5s;        /* 不支援IE與Opera瀏覽器 */
    -moz-animation:MyMove 5s;   /* Firefox 使用的語法 */
    -webkit-animation:MyMove 5s;    /* Chrome、Safari 使用的語法 */
}

animation-delay

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

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

【範例】

#box7 {
    width:100px;
    height:100px;
    background:purple;
    position:relative;

    animation:MyMove 5s;        /* 不支援IE與Opera瀏覽器 */
    -moz-animation:MyMove 5s;   /* Firefox 使用的語法 */
    -webkit-animation:MyMove 5s;    /* Chrome、Safari 使用的語法 */

    animation-delay:5s;     /* 不支援IE與Opera瀏覽器 */
    -moz-animation-delay:5s;    /* Firefox 使用的語法 */
    -webkit-animation-delay:5s; /* Chrome、Safari 使用的語法 */
}

animation-direction

說明:指定影格動畫的播放週期,播放完後是否反向播放。範例結果請參考這裡

屬性值:normal(預設值,直線播放)、alternate(來回播放)

【範例】

#box8 {
    width:100px;
    height:100px;
    background:brown;
    position:relative;

    animation:MyMove 5s;        /* 不支援IE與Opera瀏覽器 */
    -moz-animation:MyMove 5s;   /* Firefox 使用的語法 */
    -webkit-animation:MyMove 5s;    /* Chrome、Safari 使用的語法 */

    animation-iteration-count:infinite;     /* 不支援IE與Opera瀏覽器 */
    -moz-animation-iteration-count:infinite;    /* Firefox 使用的語法 */
    -webkit-animation-iteration-count:infinite; /* Chrome、Safari 使用的語法 */

    animation-direction:alternate;      /* 不支援IE與Opera瀏覽器 */
    -moz-animation-direction:alternate; /* Firefox 使用的語法 */
    -webkit-animation-direction:alternate;  /* Chrome、Safari 使用的語法 */
}

animation-duration

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

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

【範例】

#box {
    animation-duration: 5s;     /* 不支援IE與Opera瀏覽器 */
    -moz-animation-duration: 5s;    /* Firefox 使用的語法 */
    -webkit-animation-duration: 5s; /* Chrome、Safari 使用的語法 */
}

animation-iteration-count

說明:指定影格動畫的播放次數。範例結果請參考這裡

屬性值:(數值)、infinite(無限次)

【範例】

#box8 {
    width:100px;
    height:100px;
    background:brown;
    position:relative;

    animation:MyMove 5s;        /* 不支援IE與Opera瀏覽器 */
    -moz-animation:MyMove 5s;   /* Firefox 使用的語法 */
    -webkit-animation:MyMove 5s;    /* Chrome、Safari 使用的語法 */

    animation-iteration-count:infinite;     /* 不支援IE與Opera瀏覽器 */
    -moz-animation-iteration-count:infinite;    /* Firefox 使用的語法 */
    -webkit-animation-iteration-count:infinite; /* Chrome、Safari 使用的語法 */

    animation-direction:alternate;      /* 不支援IE與Opera瀏覽器 */
    -moz-animation-direction:alternate; /* Firefox 使用的語法 */
    -webkit-animation-direction:alternate;  /* Chrome、Safari 使用的語法 */
}

animation-name

說明:指定套用的動畫名稱,英文大小寫示為不同字。此屬性不提供範例結果,請參照其它關聯屬性。

屬性值:(文字)、none(無動畫)

【範例】

#box {
    animation-name:MyMove;      /* 不支援IE與Opera瀏覽器 */
    -moz-animation-name:MyMove; /* Firefox 使用的語法 */
    -webkit-animation-name:MyMove;  /* Chrome、Safari 使用的語法 */
}

animation-play-state

說明:指定動畫的播放狀態。範例結果請參考這裡

屬性值:running(預設值,播放動畫)、paused(暫停動畫)

【範例】

#box9 {
    width:100px;
    height:100px;
    background:black;
    position:relative;

    animation:MyMove 5s;        /* 不支援IE與Opera瀏覽器 */
    -moz-animation:MyMove 5s;   /* Firefox 使用的語法 */
    -webkit-animation:MyMove 5s;    /* Chrome、Safari 使用的語法 */

    animation-play-state:paused;        /* 不支援IE與Opera瀏覽器 */
    -moz-animation-play-state:paused;   /* Firefox 使用的語法 */
    -webkit-animation-play-state:paused;    /* Chrome、Safari 使用的語法 */
}

animation-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之間的數字。

【範例】

#box6 {
    width:100px;
    height:100px;
    background:red;
    position:relative;

    animation:MyMove 5s;        /* 不支援IE與Opera瀏覽器 */
    -moz-animation:MyMove 5s;   /* Firefox 使用的語法 */
    -webkit-animation:MyMove 5s;    /* Chrome、Safari 使用的語法 */

    animation-timing-function:ease-out;     /* 不支援IE與Opera瀏覽器 */
    -moz-animation-timing-function:ease-out;    /* Firefox 使用的語法 */
    -webkit-animation-timing-function:ease-out; /* Chrome、Safari 使用的語法 */
}