CSS3動畫屬性之Animation

1、Animation 屬性（動畫）

Animation 是 CSS3 屬性中，除了 transform、transiton 以外的一個動畫屬性。

具體有：animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state。

---

2、庖丁解牛

2.1 animation-name

語法： animation-name: none | index; 規定須要綁定到選擇器的 keyframe 名稱。

keyframe 關鍵幀

能夠爲動畫變化的關鍵位置設置必定的順序。

它的規則是 @keyframes 名稱 {...} （注意要加 s，否則沒法識別規則。）

有兩種寫法，一種是 0% - 100%，中間能夠建立多個百分比給元素加上動畫效果。

假設自定義 keyfram 名稱爲：index

@keyframes index {
    0% {
        /* ... */
    }
    50% {
        /* ... */
    }
    100% {
        /* ... */
    }
}
複製代碼

另一種寫法是，from - to，from 至關於 0%，to 至關於100%，中間正常添加百分比。

@keyframes index {
    from {
        /* ... */
    }
    50% {
        /* ... */
    }
    to {
        /* ... */
    }
}
複製代碼

2.2 animation-duration

語法： animation-duration: time;

規定完成動畫所花費的時間**（持續時間）**，單位爲秒或毫秒。

2.3 animation-timing-function

語法： animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(number, number, number, number) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(number, number, number, number)]*

規定動畫的速度曲線。

2.4 animation-delay

語法： animation-delay: time;

規定在動畫開始以前的延遲時間，單位爲秒或毫秒。

2.5 animation-iteration-count （迭代次數）

語法： animation-iteration-count: infinite | number;

規定動畫應該反覆播放的次數**（迭代次數）**。

2.6 animation-direction （播放方向）

語法： animation-direction: normal | reverse | alternate | alternate-reverse;

規定動畫播放的方向。

normal：默認值，正向播放。

reverse：反向播放。

alternate：偶數次反向播放、奇數次正向播放。

alternate-reverse：奇數次反向播放、偶數次正向播放。

2.7 animation-fill-mode （填充模式）

語法： animation-fill-mode: none | forwards | backwards | both;

規定動畫在播放以前或以後，其動畫效果是否可見。

none：不改變默認行爲。

forwards：當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）。

backwards：在 animation-delay 所指定的一段時間內，在動畫顯示以前，應用開始屬性值（在第一個關鍵幀中定義）。

both：向前和向後填充模式都被應用。

2.8 animation-play-state （播放狀態）

語法： animation-play-state: running | paused

規定動畫正在運行仍是暫停，即控制動畫播放狀態。

running：默認值，動畫正常播放。

paused：動畫暫停。

---

3、小試牛刀

html：

<div class="box">Animation</div>
複製代碼

.box {
    width: 100px;
    height: 100px;
    background-color: pink;
    animation: index 2s ease-in .2s 3 normal both;
}
/* @keyframes index { 0% { width: 200px; } 50% { height: 200px; } 100% { transform: rotate(180deg) } } */
@keyframes index {
    from {
        width: 200px;
    }
    50% {
        height: 200px;
    }
    to {
        transform: rotate(180deg);
    }
}
複製代碼

---

4、瀏覽器兼容性