詳談css3的動畫特效之動畫序列

大家都知道animation是css的屬性，本文主要介紹了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; }

效果如所示：