有關 animation 動畫你要知道的

透過 CSS3，我們能夠建立動畫 animation，一個非常有意思的東西。它在許多網頁中取代動畫圖片、JavaScript，甚至簡單的Flash 動畫，讓頁面生動起來。

例項

先舉個簡單的例子：

div {
    width:20px;
    height:20px;
    background:red;
    position:relative;
    animation:mymove 10s infinite;
    -webkit-animation:mymove 10s infinite; /*Safari and Chrome*/
}
@keyframes mymove {
    from {left:0px;}
    to {left:300px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/ {
    from {left:0px;}
    to {left:300px;}
}

在這個例子裡：寬20px、長20px的紅色方塊，從螢幕左側left=0的位置，勻速移動到left=300px的位置，並且迴圈運動。

來，我們來看這裡的關鍵詞：

mymove => 動畫的名稱

10s => 動畫執行時間

infinite => 無限次重複

——————————手動分割線——————————

屬性

animation:name duration timing-function delay iteration-count direction;

想弄明白animation動畫，首先，我們要知道他的幾個屬性：

1. animation-name
動畫的名字，也就是繫結到選擇器的 keyframe 名稱。

2. animation-duration

動畫執行從開始到結束花費的時間，預設是0，如果不設定該屬性，就不會有動畫效果。

3. animation-timing-function

動畫運動速度。這個比較複雜，可以設定為：

· linear：勻速運動

· ease： 這個是預設的效果，低速-高速-低速。

· ease-in： 低速開始

· ease-out： 低速結束

· ease-in-out： 低速開始，低速結束

· cubic-bezier(n,n,n,n)：n可以是0-1的任意值

4. animation-delay
動畫延時執行，延遲的時間，預設是0，也可以設定負值。

5. animation-iteration-count
動畫播放次數，infinite是無限播放

6. animation-direction
動畫反向播出

——————————手動分割線——————————

keyframes

Chrome 和 Safari 需要字首 -webkit-，

Firefox 需要字首 -moz-，

Opera 需要字首 -o-。

注意：Internet Explorer 9 以及更早的版本不支援 animation 屬性。