首先復習一下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; }效果如下圖所示：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
