0、寫在前面
在CSS系列——一步一步帶你認識transition過渡效果這篇文章中，我給大家詳細講解了transition過渡的用法，能夠實現比較友好的過渡效果，但是功能比較有限，如果要想實現比較漂亮的動畫效果，就需要我們今天要請出主角animation登場了。首先，我們來看看animation的屬性：
| 屬性 | 描述 | 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 |
哇~~~，這麼多，講的什麼鬼啊，算了，不看了！且慢，本文將結合示例來講解每一個屬性，生動易懂。不信？不信你就接著看唄。
1、瀏覽器支援度
在Can I use網站中，我們可以查詢到，目前僅IE10以上支援animation屬性。Internet Explorer 10、Firefox 以及 Opera 支援 animation 屬性。Safari 和 Chrome 支援替代的 -webkit-animation 屬性。為了節約篇幅，本文中，所有的示例中將省略瀏覽器。
2、CSS Animation屬性詳解
2.1 animation
使用animation需要指定動畫的名稱以及動畫完成一個週期的持續時間。animation是一個複合屬性,有以下屬性：
animation:[ || || || || || ][, [ || || || || || ] ]*
可以單獨寫每一個屬性，也可以直接使用animation複合屬性。一般使用複合屬性，可以減少程式碼量，何樂不為呢？
下面將結合示例詳細介紹animation每一個屬性的功能和用法。
2.2 @keyframes的寫法
@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;
}
}
複製程式碼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；
3、寫在最後
好了，animation屬性的介紹就到這裡了。animation每一個屬性並不難理解，難的是我們如何使用這些屬性寫出很酷炫的動畫效果？任何事情都不是一蹴而成的，多思考，多寫，這就是祕訣。
最後推薦一個很有名的動畫庫animate.css以及loading效果
感謝閱讀！
參考
遇見了，不妨關注下我的微信公眾號「前端Talkking」