CSS3中的animation動畫屬性簡介

在CSS3中，有一個新的屬性能夠用來作一些簡單的動畫效果，這就是animation，中文意思就是動畫。

1、首先咱們來看看animation屬性的兼容性（來源caniuse）

2、animation使用的簡單例子

在這個例子中，我讓一個從左移動到右，再移動回左邊： 代碼以下：

實驗地址

3、講講@keyframes動畫的建立

• 介紹 在使用animation爲元素製做動畫時，先要制定想要的動畫效果，例如讓div元素移動，又或者改變它的背景色，實現翻轉效果等，這時候就要用到@keyframes爲其建立動畫的效果；

• @keyframes的寫法 總的格式以下：

  @keyframes 動畫的名字{ 這裏制定元素變化的效果 }

• @keyframes的幾個關鍵詞 1.from和to，標記元素的起始狀態和結束狀態，例以下面例子，元素的起始背景色是紅色，使其慢慢變成藍色就能夠這樣寫；

  

  2.此外，狀態變化也能夠用百分比進行標識，添加動畫在每一個進度時的效果；

  

PS：在 @keyframes中填寫動畫效果，結束是不能添加分號;的，不然沒有效果，下面這個是錯誤的寫法：

---

這裏介紹animation的七大屬性

1、animation-duration屬性（持續時間）

• 介紹 animation-duration是爲動畫制定持續的時間，通常以秒或者毫秒來計算，若是不填寫該屬性，則默認爲0，沒有動畫效果；

• 寫法：

  

2、animation-timing-function屬性（時間曲線）

• 介紹 animation-timing-function屬性是爲動畫制定從開始到結束時的播放速度曲線，好比由快到慢，或者由慢到快等；

• animation-timing-function的幾個值 1.linear：表示動畫一直以勻速進行播放；貝賽爾函數cubic-bezier(0,0,0.25,1) 2.ease：默認值，表示動畫先慢後快，在即將結束時再變慢；cubic-bezier(0.25,0.1,0.25,1) 3.ease-in：動畫由慢到快直至結束；cubic-bezier(0.42,0,1,1) 4.ease-out：動畫由快到慢直至結束；cubic-bezier(0,0,0.58,1) 5.ease-in-out：動畫由慢到快再到慢直至結束，與ease不一樣的是它均等得分爲三份，而ease是隻在結束時變慢；cubic-bezier(0.42,0,0.58,1) 6.標註時間：也能夠直接標註一個時間(以s作單位)來規定動畫全稱以該速度進行播放； 7.貝賽爾函數：也能夠使用貝賽爾函數來對動畫的播放時間曲線進行規定； 關於貝賽爾函數點這裏 這裏是五個不一樣動畫之間的效果對比： 效果對比

• animation-timing-function寫法

  

3、animation-delay屬性（動畫延遲時間）

• 介紹 delay顧名思義是延遲的意思，該屬性做用就是規定動畫延遲多少時間進行播放的，以秒或者毫秒作單位，默認值爲0，能夠設置負數，設置負數時候，動畫直接跳過負數時間段進行執行，例如：動畫只有5s，設置該屬性的值爲-2s的時候，動畫是直接從第三秒的位置開始的；

• animation-delay負值與正值的對比 實驗地址

• animation-delay寫法

  

4、animation-iteration-count屬性（動畫播放次數）

• 介紹 iteration-count這個鏈接詞中，iteration的意思是反覆，count的意思是次數。該屬性制定動畫的播放次數，默認是1，也就是播放一次，填寫數字幾就是播放幾回，此外，還有值infinite是無限循環的意思；

• animation-iteration-count寫法

  

5、animation-direction屬性（動畫反向播放）

• 介紹 該屬性中，direction是方向的意思，該屬性制定動畫是否反方向播放，以及怎麼樣進行播放；

• animation-direction的四個值 1.normal：默認值，不進行反方向播放； 2.reverse：所有播放都是用反方向播放； 3.alternate：在奇數次數（一、三、5）的時候正向播放，偶數次數（二、四、6）進行反向播放； 4.alternate-reverse：在偶數次數（一、三、5）的時候正向播放，奇數次數（二、四、6）進行反向播放；

四個值的播放對比

• animation-direction的寫法

6、animation-fill-mode屬性（動畫保持開始或者結束時的樣式）

• 介紹 animation-fill-mode屬性制定動畫是否保持開始時的樣式，或者是結束時的樣式，又或者二者皆有，好比在一次播放結束後，動畫保持什麼樣的樣式；

• animation-fill-mode屬性的三個值 1.forwards：動畫結束後保持結束時的樣式； 2.backwards：動畫結束後保持開始時的樣式； 3.both：二者皆有；

三個值之間的對比

7、animation-play-state屬性（暫停動畫）

• 介紹 animation-play-state屬性制定動畫的運行狀態，是運行仍是暫停；

• animation-play-state屬性的兩個值 1.paused：動畫暫停； 2.running：動畫運行；

• 例子：點擊按鈕暫停動畫或開始動畫 暫停或運行動畫

---

最後說說animation的簡寫形式

格式以下： animation: name duration timing-function delay iteration-count direction fill-mode play-state;

隨便作作也感受很漂亮