[20]CSS3 動畫效果

一．動畫簡介

HTML5 中 CSS3 的動畫效果，能夠經過相似 Flash 那樣的關鍵幀模式控制運行。

CSS3 提供了相似 Flash 關鍵幀控制的動畫效果，經過 animation屬性實現。那麼以前的 transition屬性只能經過指定屬性的初始狀態和結束狀態來實現動畫效果，有必定的侷限性。

animation 實現動畫效果主要由兩個部分組成：
1.經過相似 Flash 動畫中的關鍵幀聲明一個動畫；
2.在 animation 屬性中調用關鍵幀聲明的動畫。

CSS3 提供的 animation 是一個複合屬性，它包含了不少子屬性。以下表所示：

屬性	說明
animation-name	用來指定一個關鍵幀動畫的名稱，這個動畫名必須對應一個@keyframes 規則。CSS 加載時會應用animation-name 指定的動畫，從而執行動畫。
animation-duration	用來設置動畫播放所需的時間
animation-timing-function	用來設置動畫的播放方式
animation-delay	用來指定動畫的延遲時間
animation-iteration-count	用來指定動畫播放的循環次數
animation-direction	用來指定動畫的播放方向
animation-play-state	用來控制動畫的播放狀態
animation-fill-mode	用來設置動畫的時間外屬性
animation	以上的簡寫形式

除了這 9 個屬性以外，動畫效果還有一個重要的屬性，就是關鍵幀屬性：@keyframes。它的做用是聲明一個動畫，而後在 animation 調用關鍵幀聲明的動畫。

//基本格式，「name」可自定義
@keyframes name {
    /*...*/
}

二．屬性詳解

在講解動畫屬性以前，先建立一個基本的樣式。

//一個 div 元素
<div>我是 HTML5</div>

//設置 CSS
div {
    width: 200px;
    height: 200px;
    background-color: white;
    border: 1px solid green;
}

1.@keyframes

//建立動畫的第一步，先聲明一個動畫關鍵幀。
@keyframes myani {
    0% {
        background-color: white;
        margin-left:0px;
    }
    50% {
        background-color: black;
        margin-left:100px;
    }
    100% {
        background-color: white;
        margin-left:0px;
    }
}
//或者重複的，能夠並列寫在一塊兒
@keyframes myani {
    0%, 100% {
        background-color: white;
        margin-left:0px;
    }
    50% {
        background-color: black;
        margin-left:100px;
    }
}

2.animation-name

//調用@keyframes 動畫
animation-name: myani;

屬性值	說明
none	默認值，沒有指定任何動畫
INDEX	是由@keyframes 指定建立的動畫名稱

3.animation-duration

//設置動畫播放的時間
animation-duration: 1s;

固然，以上經過關鍵幀的方式，這裏插入了三個關鍵幀。0%設置了白色和左偏移爲 0，和初始狀態一致，代表從這個地方開始動畫。50%設置了黑色，左偏移 100px。而 100%則是最後一個設置，又回到了白色和左偏移爲 0。整個動畫就一目瞭然了。

而對於關鍵幀的用法，大部分用百分比比較容易控制，固然，還有其餘一些控制方法。

//從什麼狀態過渡到什麼狀態
@keyframes myani {
    from {
        background-color: white;
        margin-left:0px;
    }
    to {
        background-color: black;
        margin-left:100px;
    }
}

4.animation-timing-function

//設置緩動
animation-timing-function: ease-in;

屬性值	說明
ease	默認值，元素樣式從初始狀態過渡到終止狀態時速度由快到慢，逐漸變慢。等同於貝塞爾曲線(0.25, 0.1,0.25,1.0)
linear	元素樣式從初始狀態過渡到終止狀態速度是恆速。等同於貝塞爾曲線(0.0,0.0, 1.0, 1.0)
ease-in	元素樣式從初始狀態過渡到終止狀態時，速度愈來愈快，呈一種加速狀態。等同於貝塞爾曲線(0.42, 0,1.0, 1.0)
ease-out	元素樣式從初始狀態過渡到終止狀態時，速度愈來愈慢，呈一種減速狀態。等同於貝塞爾曲線(0, 0, 0.58,1.0)
ease-in-out	元素樣式從初始狀態過渡到終止狀態時，先加速，再減速。等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)
cubic-bezier	自定義三次貝塞爾曲線

5.animation-delay

//設置延遲時間
animation-delay: 1s;

6.animation-iteration-count

//設置循環次數
animation-iteration-count: infinite;

屬性值	說明
次數	默認值爲 1
infinite	表示無限次循環

7.animation-direction

//設置緩動方向交替
animation-direction: alternate;

屬性值	說明
normal	默認值，每次播放向前
alternate	一次向前，一次向後，一次向前，一次向後這樣交替

8.animation-play-state

//設置中止播放動畫
animation-play-state: paused;

9.animation-fill-mode

//設置結束後不在返回
animation-fill-mode: forwards;

屬性值	說明
none	默認值，表示按預期進行和結束
forwards	動畫結束後繼續應用最後關鍵幀位置，即不返回
backforwards	動畫結束後迅速應用起始關鍵幀位置，即返回
both	根據狀況產生 forwards 或 backforwards的效果

//both 須要結合，次數和播放方向
animation-iteration-count: 4;
animation-direction: alternate;

六．簡寫和版本

//簡寫形式完整版
animation: myani 1s ease 2 alternate 0s both;

爲了兼容舊版本，須要加上相應的瀏覽器前綴，版本信息以下表：

支持度	Opera	Firefox	Chrome	Safari	IE
支持需帶前綴	15 ~ 29	5 ~ 15	4 ~ 42	4 ~ 8	無
支持不帶前綴	無	16+	43+	無	10.0+

//兼容完整版，Opera 在這個屬性上加入 webkit，因此沒有-o-
-webkit-animation: myani 1s ease 2 alternate 0s both;
-moz-animation: myani 1s ease 2 alternate 0s both;
-ms-animation: myani 1s ease 2 alternate 0s both;
transition: all 1s ease 0s;

//@keyframes 也須要加上前綴
@-webkit-keyframes myani {...}
@-moz-keyframes myani {...}
@-o-keyframes myani {...}
@-ms-keyframes myani {...}
keyframes myani {...}