首頁 > web前端 > css教學 > 主體

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

小云云
發布: 2017-12-25 09:05:15
原創
1598 人瀏覽過

大家都知道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: &#39;suningcloud&#39;;
    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; 
}
登入後複製

效果如下圖所示:

相關推薦:

CSS3裡怎麼實現單選框動畫特效

純css3實現3D圖片立方體旋轉動畫特效

巧用css3 animation動畫特效外掛程式介紹

以上是詳談css3的動畫特效之動畫序列的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板