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

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

animation屬性兼容

二、animation使用的簡單例子

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

div移動

實驗地址

三、講講@keyframes動畫的創建

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

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

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

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

  from和to
  
  2.此外，狀態變化也可以用百分比進行標識，添加動畫在每個進度時的效果；
  
  百分比表示動畫效果進度

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

錯誤寫法

這里介紹animation的七大屬性

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

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

• 寫法：

  
  

二、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寫法
  

  animation-timing-function

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

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

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

• animation-delay寫法
  

  animation-delay寫法

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

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

• animation-iteration-count寫法
  

  動畫播放次數

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

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

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

四個值的播放對比

• animation-direction的寫法

animation-direction寫法

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

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

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

三個值之間的對比

七、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;

animation屬性簡寫

隨便做做也感覺很漂亮