css3的動(dòng)畫特效之動(dòng)畫序列（animation）
我要評(píng)論首先復(fù)習(xí)一下animation動(dòng)畫添加各種參數(shù)
（1）infinite參數(shù)，表示動(dòng)畫將無限循環(huán)。在速度曲線和播放次數(shù)之間還可以插入一個(gè)時(shí)間參數(shù)，用以設(shè)置動(dòng)畫延遲的時(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動(dòng)畫中加入反向播放參數(shù)alternate。在加入該參數(shù)后，動(dòng)畫將在偶數(shù)次數(shù)時(shí)反向播放動(dòng)畫。
.close:hover::before{
-webkit-animation: spin 1s linear 1s 2 alternate;
animation: spin 1s linear 1s 2 alternate;
}
animation屬性參數(shù)中，延遲參數(shù)是我們較為常用的一種參數(shù)。當(dāng)動(dòng)畫的對(duì)象為多個(gè)時(shí)，我們常常用延遲參數(shù)來形成動(dòng)畫序列。如以下代碼定義了5個(gè)不同的圖標(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;
}
初始化的時(shí)候展示，如下圖所示；
接下來，為圖標(biāo)添加animation動(dòng)畫，使圖標(biāo)初始位置向下偏移-100%，然后再向上移動(dòng)回到初始位置，在此過程中同時(shí)使圖標(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個(gè)圖標(biāo)的動(dòng)畫效果都是同時(shí)進(jìn)行的，為了使圖標(biāo)運(yùn)動(dòng)帶有先后順序，我們將為每個(gè)動(dòng)畫添加延遲。和之前運(yùn)用的方法所不同，我們可以直接通過animation-delay屬性來設(shè)置animation動(dòng)畫延遲，代碼如下：
.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;
}
在以上代碼中，我們?cè)O(shè)置了5個(gè)圖標(biāo)的延遲時(shí)間分別為0、0.1、0.2、0.3和0.4s。實(shí)際上，延遲0秒為默認(rèn)值，因此第一個(gè)圖標(biāo)實(shí)際上也不需要設(shè)置延遲代碼。測(cè)試頁面，動(dòng)畫效果如圖所示。
里面我刷新了兩次，發(fā)現(xiàn)最開頭，幾個(gè)圖標(biāo)將在頂部一閃而過。這個(gè)算bug
造成這個(gè)bug原因：在于除第一個(gè)圖標(biāo)外，其余圖標(biāo)都有一定的動(dòng)畫延遲，而在動(dòng)畫沒有開始時(shí)，圖標(biāo)是沒有發(fā)生偏移，也是完全不透明的，只有當(dāng)動(dòng)畫開始的那一瞬間，圖標(biāo)才會(huì)切換到完全透明且偏移的動(dòng)畫起始狀態(tài)。
解決辦法：需要使用animation動(dòng)畫的animation-fill-mode屬性。這一屬性規(guī)定了元素在動(dòng)畫時(shí)間之外的狀態(tài)是怎樣的。若該值為forwards，則表示動(dòng)畫完成后保留最后一個(gè)關(guān)鍵幀中的屬性值，該值為backwards時(shí)則恰好相反，表示在動(dòng)畫延遲之前就使得元素應(yīng)用第一個(gè)關(guān)鍵幀中的屬性值，而該值為both時(shí)則表示同時(shí)包含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;
/*清除抖動(dòng)*/
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
效果如下圖所示：
PS:在animation中也可以像transition動(dòng)畫那樣設(shè)置速度曲線
比如實(shí)現(xiàn)：在本例中我們希望圖標(biāo)的運(yùn)動(dòng)帶有一點(diǎn)彈性效果，即圖標(biāo)向上運(yùn)動(dòng)時(shí)，并非減速并停止在終點(diǎn)，而是到達(dá)終點(diǎn)后繼續(xù)向上運(yùn)動(dòng)，超過一定距離后再反方向運(yùn)動(dòng)回到終點(diǎn)，形成一種往復(fù)的效果。
我們當(dāng)然可以使用幀動(dòng)畫來實(shí)現(xiàn)這樣的效果，但是如果使用速度曲線將更為簡(jiǎn)便。要使用自定義曲線，我們往往需要一些工具，因?yàn)镃SS3動(dòng)畫使用了三次貝塞爾（Cubic Bezier）數(shù)學(xué)函數(shù)來生成速度曲線，而這個(gè)函數(shù)的參數(shù)并不直觀。我們可以使用諸如cubic-bezier.com這樣的站點(diǎn)來可視化地調(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);
/*清除抖動(dòng)*/
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
效果如下圖所示：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
基于html css實(shí)現(xiàn)帶搜索圖標(biāo)的搜索框功能
這篇文章主要介紹了基于html css實(shí)現(xiàn)帶搜索圖標(biāo)的搜索框功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-10-09
本文通過實(shí)例代碼給大家分享8款純CSS3實(shí)現(xiàn)的搜索框功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-09-14
CSS實(shí)現(xiàn)隱藏搜索框功能(動(dòng)畫正反向序列)
純CSS實(shí)現(xiàn)動(dòng)畫效果：鼠標(biāo)移上圖標(biāo)顯示搜索框，鼠標(biāo)移出隱藏搜索框，這種效果給用戶帶來很好的體驗(yàn)效果，下面小編給大家?guī)砹薈SS實(shí)現(xiàn)隱藏搜索框功能(動(dòng)畫正反向序列)的完整2021-07-19
