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.一、0.二、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; 
}

效果以下圖所示：

 

歡迎訪問：

一、雲商城isv系統http://isv.suningcloud.com/mpisv-web/index

 二、雲商城消費者門戶http://www.suningcloud.com/promotion/index/experience_center.html