【前端Talkking】CSS系列——一步一步帶你認識animation動畫效果

0、寫在前面

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

屬性	描述	css
@keyframes	規定動畫	3
animation	全部動畫屬性的簡寫，除了animation-play-state屬性	3
animation-name	規定@keyframes動畫的名稱	3
animation-duration	規定動畫完成一個週期的時間，默認爲0	3
animation-timing-function	規定動畫的速度曲線，默認是ease	3
animation-iteration-count	規定動畫播放的次數，默認是1	3
animation-direction	規定動畫是否在下一個週期逆向播放	3
animation-play-state	規定動畫是否正在運行或者暫停，默認是running	3
animation-fill-mode	規定動畫時間以外的狀態	3

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

一、瀏覽器支持度

在Can I use網站中，咱們能夠查詢到，目前僅IE10以上支持animation屬性。Internet Explorer 十、Firefox 以及 Opera 支持 animation 屬性。Safari 和 Chrome 支持替代的 -webkit-animation 屬性。爲了節約篇幅，本文中，全部的示例中將省略瀏覽器。前端

二、CSS Animation屬性詳解

2.1 animation

使用animation須要指定動畫的名稱以及動畫完成一個週期的持續時間。animation是一個複合屬性,有如下屬性：css3

animation:[ || || || || || ][, [ || || || || || ] ]*git

能夠單獨寫每個屬性，也能夠直接使用animation複合屬性。通常使用複合屬性，能夠減小代碼量，何樂不爲呢？github

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

2.2 @keyframes的寫法

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

@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;
  }
}
複製代碼

2.3 animation-name

用法：微信

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

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

2.4 animation-duration

用法：

animation-duration: [,]*

指定動畫持續的時間，默認是0，表示沒有動畫，單位能夠設置成ms或者s。若是忽略時長，則動畫不會容許，由於默認值是0。

<div class="demo1"></div>
複製代碼

.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。

2.5 animation-timing-function

用法：

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。

<div class="demo2">
   <h3>ease</h3>
   <div class="box box1"></div>
   <h3>linear</h3>
   <div class="box box2"></div>
   <h3>ease-in</h3>
   <div class="box box3"></div>
   <h3>ease-out</h3>
   <div class="box box4"></div>
   <h3>ease-in-out</h3>
   <div class="box box5"></div>
</div>
複製代碼

.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 勻速

2.6 animation-delay

用法：

animation-delay: [,]*

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

<div class="demo3"></div>
複製代碼

.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才執行。

2.7 animation-iteration-count

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

指定動畫播放的次數，默認值爲1，表示動畫播放完後就中止。除了指定數字，也能夠設置關鍵字infinite，表示無限循環播放。

<div class="demo4"></div>
複製代碼

.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代碼。

<div class="heart">
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 500 450">
    <defs>
      <radialGradient id="gradient" cx="35%" cy="30%">
        <stop stop-color="red" />
        <stop stop-color="#900" offset="100%" />
      </radialGradient>
      <radialGradient id="glow">
        <stop stop-color="white" stop-opacity=".8" offset="60%" />
        <stop stop-color="white" stop-opacity="0" offset="100%" />
      </radialGradient>
    </defs>
    <path d="m140,0 c-137.446907,-2.4711 -264.638405,212.481001 105.92601,435.341002c0.405975,-0.730988 1.968994,-0.730988 2.375,0c382.517975,-230.048996 234.665009,-451.640422 92.625977,-434.390902c-55.372986,6.724501 -81.503998,37.456499 -93.813995,63.888002c-12.30899,-26.431503 -38.440002,-57.163502 -93.812988,-63.888002c-4.438004,-0.539301 -8.866013,-0.870199 -13.300003,-0.949999l0,-0.000101z" id="path2361" fill="url(#gradient)"/>
    <circle r="10%" cx="25%" cy="25%" fill="url(#glow)" />
  </svg>
</div>
複製代碼

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

在瀏覽器中的效果以下：

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

2.8 animation-direction

用法：

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...）正向播放。

看例子好理解：

<h3>normal</h3>
<div class="box box11"></div>
<h3>alternate</h3>
<div class="box box12"></div>
<h3>alternate-reverse</h3>
<div class="box box13"></div>
複製代碼

.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屬性，咱們能夠實現文字閃爍的效果，看代碼：

<div class="blink">看我閃爍了5次</div>
複製代碼

.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次。

2.9 animation-play-state

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

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

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

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

<div class="demo5"></div>
複製代碼

.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代碼，就實現了鼠標挪開的時候，保持動畫的播放狀態不變。

2.10 animation-fill-mode

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

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

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

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

both,表示forwards和backwards都應用。

請看示例：

<h3>none</h3>
<div class="box"></div>
<h3>forwards</h3>
<div class="box forwards"></div>
<h3>backwards</h3>
<div class="box backwards"></div>
<h3>both</h3>
<div class="box both"></div>
複製代碼

.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效果

感謝閱讀！

參考

碰見了，不妨關注下個人微信公衆號「前端Talkking」