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

首先複習一下animation動畫新增各種引數

（1）infinite引數，表示動畫將無限迴圈。在速度曲線和**次數之間還可以插入乙個時間引數，用以設定動畫延遲的時間。如希望使圖示在1秒鐘後再開始旋轉，並旋轉兩次，**如下

.close:hover::before程式設計客棧

（2）alternate引數。animation動畫中加入反向**引數alternate。在加入該引數後，動畫將在偶數次數時反向**動畫。

.close:hover::before

animation屬性引數中，延遲引數是我們較為常用的一種引數。當動畫的物件為多個時，我們常常用延遲引數來形成動畫序列。如以下**定義了5個不同的圖示：

圖示的基本樣式和之前的close圖示一致，不同之處在於此處的圖示都設定為inline-block，使它們能夠橫向排列。**如下：

.close

.close::before

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

接下來，為圖示新增animation動畫，使圖示初始位置向下偏移-100%，然後再向上移動回到初始位置，在此過程中同時使圖示由完全透明變化為完全不透明

.close

@-webkit-keyframes moving

to }@keyframes moving

to }

以上5個圖示的動畫效果都是同時進行的，為了使圖示運動帶有先後順序，我們將為每個動畫新增延遲。和之前運用的方法所不同，我們可以直接通過animation-delay屬性來設定animation動畫延遲，**如下：

.icon-suningliujinyun

.icon-shousuo

.icon-zhankai

.icon-diaoyonglian

.icon-lingshouyun

在以上**中，我們設定了5個圖示的延遲時間分別為0、0.1、0.2、0.3和0.4s。實際上，延遲0秒為預設值，因此第乙個圖示實際上也不需要設定延遲**。測試頁面，動畫效果如圖所示。

裡面我重新整理了兩次，發現最開頭，幾個圖示將在頂部一閃而過。這個算bug

造成這個bug原因：在於除第乙個圖示外，其餘圖示都有一定的動畫延遲，而在動畫沒有開始時，圖示是沒有發生偏移，也是完全不透明的，只有當動畫開始的那一瞬間，圖示才會切換到完全透明且偏移的動畫起始狀態。

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

.close

效果如下圖所示：

ps:在animation中也可以像transition動畫那樣設定速度曲線

比如實現：在本例中我們希望圖示的運動帶有一點彈性效果，即圖示向上運動時，並非減速並停止在終點，而是到達終點後繼續向上運動，超過一定距離後再反方向運動回到終點，形成一種往復的效果。

我們當然可以使用幀動畫來實現這樣的效果，但是如果使用速度曲線將更為簡便。要使用自定義曲線，我們往往需要一些工具，因為css3動畫使用了三次貝塞爾（cubic bezier）數學函式來生成速度曲線，而這個函式的引數並不直觀。我們可以使用諸如cubic-bezier.com這樣的站點來視覺化地調整速度曲線。

接下來，我們就能夠將該速度曲線寫入animation屬性的引數中，**如下：

.close

效果如下圖所示：

本文標題: css3的動畫特效之動畫序列（animation）

本文位址:

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

css3的動畫特效

CSS3動畫常見特效

CSS3動畫之逐幀動畫

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

css3的動畫特效

CSS3動畫常見特效

CSS3動畫之逐幀動畫

相關推薦