css3的動畫特效之動畫序列（animation）

發(fā)布時間：2017-12-22 16:13:54 作者：saucxs

這篇文章主要介紹了css3的動畫特效之動畫序列（animation）的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

首先復(fù)習(xí)一下animation動畫添加各種參數(shù)

（1）infinite參數(shù)，表示動畫將無限循環(huán)。在速度曲線和播放次數(shù)之間還可以插入一個時間參數(shù)，用以設(shè)置動畫延遲的時間。如希望使圖標(biāo)在1秒鐘后再開始旋轉(zhuǎn)，并旋轉(zhuǎn)兩次，代碼如下

.close:hover::before{
    -webkit-animation: spin 1s linear 1s 2;
    animation: spin 1s linear 1s 2;
}

（2）alternate參數(shù)。animation動畫中加入反向播放參數(shù)alternate。在加入該參數(shù)后，動畫將在偶數(shù)次數(shù)時反向播放動畫。

.close:hover::before{
    -webkit-animation: spin 1s linear 1s 2 alternate;
    animation: spin 1s linear 1s 2 alternate;
}

animation屬性參數(shù)中，延遲參數(shù)是我們較為常用的一種參數(shù)。當(dāng)動畫的對象為多個時，我們常常用延遲參數(shù)來形成動畫序列。如以下代碼定義了5個不同的圖標(biāo)：

<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>

圖標(biāo)的基本樣式和之前的Close圖標(biāo)一致，不同之處在于此處的圖標(biāo)都設(shè)置為inline-block，使它們能夠橫向排列。代碼如下：

.close{
    font-size:0px;/*使span中的文字不顯示*/
    cursor:pointer;/*使鼠標(biāo)指針顯示為手型*/
    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; /*使文本內(nèi)容不能通過屏幕閱讀器等輔助設(shè)備讀取*/
    font-size:48px;
    display:block;
}

初始化的時候展示，如下圖所示；

接下來，為圖標(biāo)添加animation動畫，使圖標(biāo)初始位置向下偏移-100%，然后再向上移動回到初始位置，在此過程中同時使圖標(biāo)由完全透明變化為完全不透明

.close{
	font-size:0px;/*使span中的文字不顯示*/
	cursor:pointer;/*使鼠標(biāo)指針顯示為手型*/
	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個圖標(biāo)的動畫效果都是同時進行的，為了使圖標(biāo)運動帶有先后順序，我們將為每個動畫添加延遲。和之前運用的方法所不同，我們可以直接通過animation-delay屬性來設(shè)置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;
}

在以上代碼中，我們設(shè)置了5個圖標(biāo)的延遲時間分別為0、0.1、0.2、0.3和0.4s。實際上，延遲0秒為默認(rèn)值，因此第一個圖標(biāo)實際上也不需要設(shè)置延遲代碼。測試頁面，動畫效果如圖所示。

里面我刷新了兩次，發(fā)現(xiàn)最開頭，幾個圖標(biāo)將在頂部一閃而過。這個算bug

造成這個bug原因：在于除第一個圖標(biāo)外，其余圖標(biāo)都有一定的動畫延遲，而在動畫沒有開始時，圖標(biāo)是沒有發(fā)生偏移，也是完全不透明的，只有當(dāng)動畫開始的那一瞬間，圖標(biāo)才會切換到完全透明且偏移的動畫起始狀態(tài)。

解決辦法：需要使用animation動畫的animation-fill-mode屬性。這一屬性規(guī)定了元素在動畫時間之外的狀態(tài)是怎樣的。若該值為forwards，則表示動畫完成后保留最后一個關(guān)鍵幀中的屬性值，該值為backwards時則恰好相反，表示在動畫延遲之前就使得元素應(yīng)用第一個關(guān)鍵幀中的屬性值，而該值為both時則表示同時包含forwards和backwards兩種設(shè)置。在本例中，我們使用backward或both均可，

.close{
    font-size:0px;/*使span中的文字不顯示*/
    cursor:pointer;/*使鼠標(biāo)指針顯示為手型*/
    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動畫那樣設(shè)置速度曲線

比如實現(xiàn)：在本例中我們希望圖標(biāo)的運動帶有一點彈性效果，即圖標(biāo)向上運動時，并非減速并停止在終點，而是到達終點后繼續(xù)向上運動，超過一定距離后再反方向運動回到終點，形成一種往復(fù)的效果。

我們當(dāng)然可以使用幀動畫來實現(xiàn)這樣的效果，但是如果使用速度曲線將更為簡便。要使用自定義曲線，我們往往需要一些工具，因為CSS3動畫使用了三次貝塞爾（Cubic Bezier）數(shù)學(xué)函數(shù)來生成速度曲線，而這個函數(shù)的參數(shù)并不直觀。我們可以使用諸如cubic-bezier.com這樣的站點來可視化地調(diào)整速度曲線。

接下來，我們就能夠?qū)⒃撍俣惹€寫入animation屬性的參數(shù)中，代碼如下：

.close{
    font-size:0px;/*使span中的文字不顯示*/
    cursor:pointer;/*使鼠標(biāo)指針顯示為手型*/
    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; 
}

效果如下圖所示：