這次帶給大家css3的動畫序列animation，使用css3動畫序列animation的注意事項有哪些，下面就是實戰案例，一起來看一下。
首先複習一下animation動畫加入各種參數
（1）infinite參數，表示動畫將無限循環。在速度曲線和播放次數之間還可以插入一個時間參數，以設定動畫延遲的時間。如希望使圖示在1秒鐘後再開始旋轉，並旋轉兩次，程式碼如下
.close:hover::before{
-webkit-animation: spin 1s linear 1s 2;
animation: spin 1s linear 1s 2;
}登入後複製
（2）alternate參數。 animation動畫中加入反向播放參數alternate。加入此參數後，動畫將在偶數次數時反向播放動畫。
.close:hover::before{
-webkit-animation: spin 1s linear 1s 2 alternate;
animation: spin 1s linear 1s 2 alternate;
}登入後複製
animation屬性參數中，延遲參數是我們較常用的一種參數。當動畫的物件為多個時，我們常常用延遲參數來形成動畫序列。如以下程式碼定義了5個不同的圖示：
<span class="close icon-suningliujinyun">Close</span>
<span class="close icon-shousuo">Close</span>
<span class="close icon-zhankai">Close</span>
<span class="close icon-diaoyonglian">Close</span>
<span class="close icon-lingshouyun">Close</span>
登入後複製
圖示的基本樣式和先前的Close圖示一致，不同之處在於此處的圖示都設定為inline-block，使它們能夠橫向排列。程式碼如下：
.close{
font-size:0px;/*使span中的文字不显示*/
cursor:pointer;/*使鼠标指针显示为手型*/
display:inline-block;
width:100px;
height:100px;
line-height:100px;
border-radius:50%;/*使背景形状显示为圆形*/
background:#FFF;
color:#8b8ab3;
text-align:center;
}
.close::before{
font-family: 'suningcloud';
speak:none; /*使文本内容不能通过屏幕阅读器等辅助设备读取*/
font-size:48px;
display:block;
}登入後複製
初始化的時候展示，如下圖所示；
接下來，為圖示新增animation動畫，使圖示初始位置向下偏移-100%，然後再向上移動回到初始位置，在此過程中同時使圖標由完全透明變化為完全不透明
.close{
font-size:0px;/*使span中的文字不显示*/
cursor:pointer;/*使鼠标指针显示为手型*/
display:inline-block;
width:100px;
height:100px;
line-height:100px;
border-radius:50%;/*使背景形状显示为圆形*/
background:#FFF;
color:#8b8ab3;
text-align:center;
/**/
-webkit-animation: moving 1s linear;
animation: moving 1s linear;
}
@-webkit-keyframes moving {
from {
opacity: 0;
-webkit-transform: translateY(100%);
}
to {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
@keyframes moving {
from {
opacity: 0;
transform: translateY(100%);
}
to {
opacity: 1;
transform: translateY(0%);
}
}登入後複製
以上5個圖標的動畫效果都是同時進行的，為了使圖示運動帶有先後順序，我們將為每個動畫添加延遲。和之前運用的方法所不同，我們可以直接透過animation-delay屬性來設定animation動畫延遲，程式碼如下：
.icon-suningliujinyun{
-webkit-animation-delay:0s;
animation-delay: 0s;
}
.icon-shousuo{
-webkit-animation-delay:.1s;
animation-delay: .1s;
}
.icon-zhankai{
-webkit-animation-delay:.2s;
animation-delay: .2s;
}
.icon-diaoyonglian{
-webkit-animation-delay:.3s;
animation-delay: .3s;
}
.icon-lingshouyun{
-webkit-animation-delay:.4s;
animation-delay: .4s;
}登入後複製
在以上程式碼中，我們設定了5個圖示的延遲時間分別為0、 0.1、0.2、0.3和0.4s。實際上，延遲0秒為預設值，因此第一個圖示實際上也不需要設定延遲代碼。測試頁面，動畫效果如圖所示。
裡面我刷新了兩次，發現最開頭，幾個圖示會在頂部一閃而過。這個算bug
造成這個bug原因：在於除第一個圖示外，其餘圖示都有一定的動畫延遲，而在動畫沒有開始時，圖示是沒有發生偏移，也是完全不透明的，只有當動畫開始的那一瞬間，圖示才會切換到完全透明且偏移的動畫起始狀態。
解決方法：需要使用animation動畫的animation-fill-mode屬性。這個屬性規定了元素在動畫時間之外的狀態是怎樣的。若該值為forwards，則表示動畫完成後保留最後一個關鍵影格中的屬性值，該值為backwards時則恰好相反，表示在動畫延遲之前就使得元素應用第一個關鍵影格中的屬性值，而該值為both時則表示同時包含forwards和backwards兩種設定。在本例中，我們使用backward或both均可，
.close{
font-size:0px;/*使span中的文字不显示*/
cursor:pointer;/*使鼠标指针显示为手型*/
display:inline-block;
width:100px;
height:100px;
line-height:100px;
border-radius:50%;/*使背景形状显示为圆形*/
background:#FFF;
color:#8b8ab3;
text-align:center;
/**/
-webkit-animation: moving 1s linear;
animation: moving 1s linear;
/*清除抖动*/
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}登入後複製
效果如下圖所示：
PS:在animation中也可以像transition動畫那樣設定速度曲線
例如實現：在本例中我們希望圖示的運動帶有一點彈性效果，即圖示向上移動時，並非減速並停止在終點，而是到達終點後繼續向上移動，超過一定距離後再反方向運動回到終點，形成往復的效果。
我們當然可以使用幀動畫來實現這樣的效果，但是如果使用速度曲線將更為簡單。要使用自訂曲線，我們往往需要一些工具，因為CSS3動畫使用了三次貝塞爾（Cubic Bezier）數學函數來產生速度曲線，而這個函數的參數並不直觀。我們可以使用諸如cubic-bezier.com這樣的網站來視覺化地調整速度曲線。
接下來，我們就能夠將該速度曲線寫入animation屬性的參數中，程式碼如下：
.close{
font-size:0px;/*使span中的文字不显示*/
cursor:pointer;/*使鼠标指针显示为手型*/
display:inline-block;
width:100px;
height:100px;
line-height:100px;
border-radius:50%;/*使背景形状显示为圆形*/
background:#FFF;
color:#8b8ab3;
text-align:center;
/**/
/*-webkit-animation: moving 1s linear;
animation: moving 1s linear;*/
/*cubic-bezier*/
-webkit-animation:moving 1s cubic-bezier(.62,-0.91,.45,1.97);
animation:moving 1s cubic-bezier(.62,-0.91,.45,1.97);
/*清除抖动*/
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}登入後複製
效果如下圖所示：
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
使用html和css實作康乃爾筆記
淺聊css網頁的版面問題
以上是css3的動畫序列animation的詳細內容。更多資訊請關注PHP中文網其他相關文章！
