摘要：是一個復合屬性有以下屬性可以多帶帶寫每一個屬性，也可以直接使用復合屬性。用法指定動畫播放方式，默認值為，支持。看例子好理解在瀏覽器中的運行效果如下這個例子就不詳細解釋了，很簡單。

在CSS系列——一步一步帶你認識transition過渡效果這篇文章中，我給大家詳細講解了transition過渡的用法，能夠實現比較友好的過渡效果，但是功能比較有限，如果要想實現比較漂亮的動畫效果，就需要我們今天要請出主角animation登場了。首先，我們來看看animation的屬性：

哇~~~，這么多，講的什么鬼啊，算了，不看了！且慢，本文將結合示例來講解每一個屬性，生動易懂。不信？不信你就接著看唄。

在Can I use網站中，我們可以查詢到，目前僅IE10以上支持animation屬性。Internet Explorer 10、Firefox 以及 Opera 支持 animation 屬性。Safari 和 Chrome 支持替代的 -webkit-animation 屬性。為了節約篇幅，本文中，所有的示例中將省略瀏覽器。

使用animation需要指定動畫的名稱以及動畫完成一個周期的持續時間。animation是一個復合屬性,有以下屬性：

animation: ||  ||  ||  ||  ||  ]*

可以多帶帶寫每一個屬性，也可以直接使用animation復合屬性。一般使用復合屬性，可以減少代碼量，何樂不為呢？

下面將結合示例詳細介紹animation每一個屬性的功能和用法。

@keyframes關鍵字可以用來定義動畫的各個狀態，基本寫法如下：

@keyframes rainbow {
  0% {
    background-color: #cd0000;
  }
  50% {
    background-color: deeppink;
  }
  100% {
    background-color: blue;
  }
}

其中，rainbow是動畫的名稱。同時，我們也可以使用from代替0%，使用to代替100%，因此上面的寫法與下面的寫法等同：

@keyframes rainbow {
  from {
    background-color: #cd0000;
  }
  50%{
    background-color: deeppink;
  }
  to {
    background-color: blue;
  }
}

用法：

animation-name: none | NAME[,none | NAME]*;

指定@keyframes后面緊跟的動畫的名字，css加載的時候會應用該名字的@keyframes規則來實現動畫。默認值為none，此時沒有動畫效果。

用法：

animation-duration: [,]*

指定動畫持續的時間，默認是0，表示沒有動畫，單位可以設置成ms或者s。如果忽略時長，則動畫不會允許，因為默認值是0。

.demo1{
  width: 100px;
  height: 100px;
  background-color: yellow;
}
.demo1:hover{
  animation: 5s rainbow;
}

@keyframes rainbow {
  0% {
    background-color: #cd0000;
  }
  50%{
    background: deeppink;
  }
  100% {
    background: blue;
  }
}

在瀏覽器中的效果如下：

在這個例子中，我們指定了動畫的名字是rainbow，并且設置了動畫持續的時間是5s，動畫分為三幀完成。因此，在hover之前，背景顏色是yellow，而在hover的時候，背景突變為 #cd0000,也就是0%的背景顏色；同時在50%的時候背景顏色變成為deeppink，在100%的時候背景顏色變成blue。

用法：

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

指定動畫播放方式，默認值為ease，支持linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n)、steps。

 

   
ease
   

   
linear
   

   
ease-in
   

   
ease-out
   

   
ease-in-out
   

.box{
  position: relative;
  width: 50px;
  height: 50px;
  color: #fff;
  margin-top: 10px;
}
.box1{
  background-color: red;
  animation: box-a 5s ease;
}
.box2{
  background-color: deeppink;
  animation: box-a 5s linear;
}
.box3{
  background-color: blue;
  animation: box-a 5s ease-in;
}
.box4{
  background-color: darkgreen;
  animation: box-a 5s ease-out;
}
.box5{
  background-color: yellow;
  animation: box-a 5s ease-in-out;
}

@keyframes box-a {
  0%{
    left: 0;
  }
  100%{
    left: 500px;
  }
}

在瀏覽器中的效果如下：

在這個例子中，我們制定了動畫周期過程中的變化曲線，其實和transition中的變化曲線是一樣的，分別是：

ease 緩慢開始，緩慢結束（默認）

ease-in 緩慢開始

ease-out 緩慢結束

ease-in-out 緩慢開始，緩慢結束（和ease稍有區別，差別并不大）

linear 勻速

?

用法：

animation-delay: [,]*

指定動畫開始播放的延遲時間，默認是0，即立即播放動畫，單位可以是ms或者s。

.demo3{
  position: relative;
  width: 50px;
  height: 50px;
  background-color: yellow;
  animation: demo3-a 1s 5s;
}
@keyframes  demo3-a  {
  0%{
    left: 0;
    background-color: deeppink;
  }
  100%{
    left: 500px;
    background-color: blue;
  }
}

在瀏覽器中的效果如下：

在這個例子中，指定了動畫的執行周期是1s,hover的時候，動畫并沒有立即執行，而是延遲了5s才執行。

animation-iteration-count:infinite |  [, infinite | ]*

指定動畫播放的次數，默認值為1，表示動畫播放完后就停止。除了指定數字，也可以設置關鍵字infinite，表示無限循環播放。

 .demo4{
        position: relative;
        width: 50px;
        height: 50px;
        background-color: yellow;
        animation: demo4-a 2s 3s 3;
    }
    @keyframes  demo4-a  {
        0%{
            left: 0;
            background-color: deeppink;
        }
        100%{
            left: 500px;
            background-color: blue;
        }
    }

在瀏覽器中的效果如下：

在這個例子中，我們指定了動畫播放的次數是3次，因此，播放3次后動畫就停止播放了。如果我們修改一行上面的代碼：

animation: demo4-a 2s 3s inifinite;,指定動畫無限播放，因此動畫會一直播放下去。

利用animation-iteration-count:infinite，我們可以實現一個心臟跳動的效果。html代碼不熟悉的可以先不管，直接看css代碼。

.heart{
  margin: 100px;
  width: 200px;
  height: 200px;
  animation: pound 1s infinite;
}
@keyframes pound {
  from{
    transform: none;
  }
  to{
    transform: scale(1.2);
  }
}

在瀏覽器中的效果如下：

在這個例子中，我們指定了動畫無限次播放，并且在100%的時候，放大到1.2倍，一個心跳的效果就實現了。是不是很酷？

用法：

animation-direction: normal | alternate [, normal | alternate]*

指定動畫播放的方向，支持normal、alternate、alternate-reverse關鍵字。

normal，默認值，表示正常播放動畫；

alternate表示輪轉正方向播放動畫，即在奇數次（1,3,5...）正常播放，而偶數次（2,4,6...）反向播放；

alternate-reverse與alternate剛好反過來，即在奇數次（1,3,5...）反向播放，而偶數次（2,4,6...）正向播放。

看例子好理解：

normal

alternate

alternate-reverse

.box11{
  background-color: red;
  animation: box-a 5s normal infinite;
}
.box12{
  background-color: deeppink;
  animation: box-a 5s alternate infinite;
}
.box13{
  background-color: blue;
  animation: box-a 5s alternate-reverse infinite;
}
@keyframes box-a {
  0%{
    left: 0;
  }
  100%{
    left: 500px;
  }
}

在瀏覽器中的運行效果如下：

這個例子就不詳細解釋了，很簡單。利用 animation-direction屬性，我們可以實現文字閃爍的效果，看代碼：

 
看我閃爍了5次

.blink{
  display: table-cell;
  vertical-align: middle;
  width: 120px;
  height: 50px;
  background-color: deeppink;
  color: #ffffff;
  animation: 0.5s blink-a 5 alternate;
}
@keyframes  blink-a{
  to{
    color: transparent;
  }
}

在瀏覽器中效果如下：

在這個例子中，我們指定了animation-direction為alternate，并且動畫運行的次數為5次。

animation-play-state:running | paused [, running | paused]*

指定動畫播放的狀態，支持關鍵字running、paused。其中：

running，默認值，表示動畫正在播放中；

paused，表示暫停播放。可以在Javascript中使用該屬性：object.style.animationPlayState=”paused”來暫停動畫。

.demo5{
  width: 100px;
  height: 10px;
  background-color: deeppink;       
}
.demo5:hover{
  animation: spin 3s linear infinite;      
}
@keyframes spin {
  to{
    transform: rotate(1turn);
  }
}

在瀏覽器中的效果如下：

在這個例子中，我們指定了動畫播放周期為3s，無限循環。當鼠標挪開的時候，動畫就會恢復到最初的狀態。如果我們想鼠標挪開的時候，保持動畫的運行狀態怎么辦？請看下面：

 .demo5{
        width: 100px;
        height: 10px;
        background-color: deeppink;
        animation: spin 3s linear infinite;
        animation-play-state: paused;
    }
    .demo5:hover{
        animation-play-state: running;
    }
    @keyframes spin {
        to{
            transform: rotate(1turn);
        }
    }

在瀏覽器中運行的效果如下：

我們稍微修改了css代碼，就實現了鼠標挪開的時候，保持動畫的播放狀態不變。

指定動畫時間外的屬性，支持關鍵字none、forwards、backwards、both。

none，默認值，表示動畫播放完成后，恢復到初始的狀態；

forwards，表示動畫播放完成后，保持@keyframes里最后一幀的屬性；

backwards，表示開始播放動畫的時候，應用@keyframes里第一幀的屬性，播放完成的時候，恢復到初始狀態，通常設置animation-delay后，才能看出效果。

both,表示forwards和backwards都應用。

請看示例：

none

forwards

backwards

both

.box{
  position: relative;
  width: 50px;
  height: 50px;
  background-color: deeppink;
  color: #fff;
  margin-top: 10px;
  animation: mode-a 5s 1 2s;
}
.forwards{
  animation-fill-mode: forwards;
}
.backwards{
  animation-fill-mode: backwards;
}
.both{
  animation-fill-mode: both;
}
@keyframes mode-a {
  from {
    left:0;
    background-color: green;
  }
  to{
    left: 500px;
    background-color: blue;
  }
}

說實話，剛開始我不知道這幾個屬性的區別在哪里，但是當我寫了一個demo，然后自己對比發現，哦，也就那樣嘛。

動畫播放前背景顏色是deeppink。

none,在動畫播放的一瞬間，動畫的背景顏色變成green，播放完成后恢復到初始狀態；

forwards在動畫播放的一瞬間，動畫的背景顏色變成green，播放完成后保持最后一幀的屬性，也就是背景顏色保持為blue,因為動畫默認播放會恢復到最初狀態，所以又會從最初的狀態開始播放;

backwards在動畫播放的一瞬間，動畫的背景顏色變成green，播放完成后保持初始狀態，也就是背景顏色保持為deeppink；

backwards兼顧了forwards和backwards的屬性，在動畫播放的一瞬間，應用backwards屬性，動畫的背景顏色變成green，播放完成后應用forwards的屬性，播放完成后保持最后一幀的屬性，也就是背景顏色保持為blue；

好了，animation屬性的介紹就到這里了。animation每一個屬性并不難理解，難的是我們如何使用這些屬性寫出很酷炫的動畫效果？任何事情都不是一蹴而成的，多思考，多寫，這就是秘訣。

最后推薦一個很有名的動畫庫animate.css以及loading效果

感謝閱讀！

CSS動畫簡介

CSS3 animation介紹

W3school

遇見了，不妨關注下我的微信公眾號「前端Talkking」