摘要：是一個(gè)復(fù)合屬性有以下屬性可以多帶帶寫每一個(gè)屬性，也可以直接使用復(fù)合屬性。用法指定動(dòng)畫播放方式，默認(rèn)值為，支持?？蠢雍美斫庠跒g覽器中的運(yùn)行效果如下這個(gè)例子就不詳細(xì)解釋了，很簡單。

在CSS系列——一步一步帶你認(rèn)識(shí)transition過渡效果這篇文章中，我給大家詳細(xì)講解了transition過渡的用法，能夠?qū)崿F(xiàn)比較友好的過渡效果，但是功能比較有限，如果要想實(shí)現(xiàn)比較漂亮的動(dòng)畫效果，就需要我們今天要請(qǐng)出主角animation登場了。首先，我們來看看animation的屬性：

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

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

使用animation需要指定動(dòng)畫的名稱以及動(dòng)畫完成一個(gè)周期的持續(xù)時(shí)間。animation是一個(gè)復(fù)合屬性,有以下屬性：

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

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

下面將結(jié)合示例詳細(xì)介紹animation每一個(gè)屬性的功能和用法。

@keyframes關(guān)鍵字可以用來定義動(dòng)畫的各個(gè)狀態(tài)，基本寫法如下：

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

其中，rainbow是動(dòng)畫的名稱。同時(shí)，我們也可以使用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后面緊跟的動(dòng)畫的名字，css加載的時(shí)候會(huì)應(yīng)用該名字的@keyframes規(guī)則來實(shí)現(xiàn)動(dòng)畫。默認(rèn)值為none，此時(shí)沒有動(dòng)畫效果。

用法：

animation-duration: [,]*

指定動(dòng)畫持續(xù)的時(shí)間，默認(rèn)是0，表示沒有動(dòng)畫，單位可以設(shè)置成ms或者s。如果忽略時(shí)長，則動(dòng)畫不會(huì)允許，因?yàn)槟J(rèn)值是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;
  }
}

在瀏覽器中的效果如下：

在這個(gè)例子中，我們指定了動(dòng)畫的名字是rainbow，并且設(shè)置了動(dòng)畫持續(xù)的時(shí)間是5s，動(dòng)畫分為三幀完成。因此，在hover之前，背景顏色是yellow，而在hover的時(shí)候，背景突變?yōu)?b> #cd0000,也就是0%的背景顏色；同時(shí)在50%的時(shí)候背景顏色變成為deeppink，在100%的時(shí)候背景顏色變成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(, , , )]*

指定動(dòng)畫播放方式，默認(rèn)值為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;
  }
}

在瀏覽器中的效果如下：

在這個(gè)例子中，我們制定了動(dòng)畫周期過程中的變化曲線，其實(shí)和transition中的變化曲線是一樣的，分別是：

ease 緩慢開始，緩慢結(jié)束（默認(rèn)）

ease-in 緩慢開始

ease-out 緩慢結(jié)束

ease-in-out 緩慢開始，緩慢結(jié)束（和ease稍有區(qū)別，差別并不大）

linear 勻速

?

用法：

animation-delay: [,]*

指定動(dòng)畫開始播放的延遲時(shí)間，默認(rèn)是0，即立即播放動(dòng)畫，單位可以是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;
  }
}

在瀏覽器中的效果如下：

在這個(gè)例子中，指定了動(dòng)畫的執(zhí)行周期是1s,hover的時(shí)候，動(dòng)畫并沒有立即執(zhí)行，而是延遲了5s才執(zhí)行。

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

指定動(dòng)畫播放的次數(shù)，默認(rèn)值為1，表示動(dòng)畫播放完后就停止。除了指定數(shù)字，也可以設(shè)置關(guān)鍵字infinite，表示無限循環(huán)播放。

 .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;
        }
    }

在瀏覽器中的效果如下：

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

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

利用animation-iteration-count:infinite，我們可以實(shí)現(xiàn)一個(gè)心臟跳動(dòng)的效果。html代碼不熟悉的可以先不管，直接看css代碼。

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

在瀏覽器中的效果如下：

在這個(gè)例子中，我們指定了動(dòng)畫無限次播放，并且在100%的時(shí)候，放大到1.2倍，一個(gè)心跳的效果就實(shí)現(xiàn)了。是不是很酷？

用法：

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

指定動(dòng)畫播放的方向，支持normal、alternate、alternate-reverse關(guān)鍵字。

normal，默認(rèn)值，表示正常播放動(dòng)畫；

alternate表示輪轉(zhuǎn)正方向播放動(dòng)畫，即在奇數(shù)次（1,3,5...）正常播放，而偶數(shù)次（2,4,6...）反向播放；

alternate-reverse與alternate剛好反過來，即在奇數(shù)次（1,3,5...）反向播放，而偶數(shù)次（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;
  }
}

在瀏覽器中的運(yùn)行效果如下：

這個(gè)例子就不詳細(xì)解釋了，很簡單。利用 animation-direction屬性，我們可以實(shí)現(xiàn)文字閃爍的效果，看代碼：

 
看我閃爍了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;
  }
}

在瀏覽器中效果如下：

在這個(gè)例子中，我們指定了animation-direction為alternate，并且動(dòng)畫運(yùn)行的次數(shù)為5次。

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

指定動(dòng)畫播放的狀態(tài)，支持關(guān)鍵字running、paused。其中：

running，默認(rèn)值，表示動(dòng)畫正在播放中；

paused，表示暫停播放?？梢栽贘avascript中使用該屬性：object.style.animationPlayState=”paused”來暫停動(dòng)畫。

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

在瀏覽器中的效果如下：

在這個(gè)例子中，我們指定了動(dòng)畫播放周期為3s，無限循環(huán)。當(dāng)鼠標(biāo)挪開的時(shí)候，動(dòng)畫就會(huì)恢復(fù)到最初的狀態(tài)。如果我們想鼠標(biāo)挪開的時(shí)候，保持動(dòng)畫的運(yùn)行狀態(tài)怎么辦？請(qǐng)看下面：

 .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);
        }
    }

在瀏覽器中運(yùn)行的效果如下：

我們稍微修改了css代碼，就實(shí)現(xiàn)了鼠標(biāo)挪開的時(shí)候，保持動(dòng)畫的播放狀態(tài)不變。

指定動(dòng)畫時(shí)間外的屬性，支持關(guān)鍵字none、forwards、backwards、both。

none，默認(rèn)值，表示動(dòng)畫播放完成后，恢復(fù)到初始的狀態(tài)；

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

backwards，表示開始播放動(dòng)畫的時(shí)候，應(yīng)用@keyframes里第一幀的屬性，播放完成的時(shí)候，恢復(fù)到初始狀態(tài)，通常設(shè)置animation-delay后，才能看出效果。

both,表示forwards和backwards都應(yīng)用。

請(qǐng)看示例：

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;
  }
}

說實(shí)話，剛開始我不知道這幾個(gè)屬性的區(qū)別在哪里，但是當(dāng)我寫了一個(gè)demo，然后自己對(duì)比發(fā)現(xiàn)，哦，也就那樣嘛。

動(dòng)畫播放前背景顏色是deeppink。

none,在動(dòng)畫播放的一瞬間，動(dòng)畫的背景顏色變成green，播放完成后恢復(fù)到初始狀態(tài)；

forwards在動(dòng)畫播放的一瞬間，動(dòng)畫的背景顏色變成green，播放完成后保持最后一幀的屬性，也就是背景顏色保持為blue,因?yàn)閯?dòng)畫默認(rèn)播放會(huì)恢復(fù)到最初狀態(tài)，所以又會(huì)從最初的狀態(tài)開始播放;

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

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

好了，animation屬性的介紹就到這里了。animation每一個(gè)屬性并不難理解，難的是我們?nèi)绾问褂眠@些屬性寫出很酷炫的動(dòng)畫效果？任何事情都不是一蹴而成的，多思考，多寫，這就是秘訣。

最后推薦一個(gè)很有名的動(dòng)畫庫animate.css以及l(fā)oading效果

感謝閱讀！

CSS動(dòng)畫簡介

CSS3 animation介紹

W3school

遇見了，不妨關(guān)注下我的微信公眾號(hào)「前端Talkking」