2017/12/20 14:22:49
saucxs
首先複習一下animation動畫新增各種引數
.close:hover::before
.close:hover::beforeanimation屬性引數中，延遲引數是我們較為常用的一種引數。當動畫的物件為多個時，我們常常用延遲引數來形成動畫序列。如以下**定義了5個不同的圖示：
close圖示的基本樣式和之前的close圖示一致，不同之處在於此處的圖示都設定為inline-block，使它們能夠橫向排列。**如下：close
close
close
close
.close初始化的時候展示，如下圖所示；.close::before
接下來，為圖示新增animation動畫，使圖示初始位置向下偏移-100%，然後再向上移動回到初始位置，在此過程中同時使圖示由完全透明變化為完全不透明
.close
@-webkit-keyframes moving以上5個圖示的動畫效果都是同時進行的，為了使圖示運動帶有先後順序，我們將為每個動畫新增延遲。和之前運用的方法所不同，我們可以直接通過animation-delay屬性來設定animation動畫延遲，**如下：to }@keyframes moving
to }
.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，則表示動畫完成後保留最後乙個關鍵幀中的屬性值，該值為backwards時則恰好相反，表示在動畫延遲之前就使得元素應用第乙個關鍵幀中的屬性值，而該值為both時則表示同時包含forwards和backwards兩種設定。在本例中，我們使用backward或both均可，
.close效果如下圖所示：
ps:在animation中也可以像transition動畫那樣設定速度曲線
比如實現：在本例中我們希望圖示的運動帶有一點彈性效果，即圖示向上運動時，並非減速並停止在終點，而是到達終點後繼續向上運動，超過一定距離後再反方向運動回到終點，形成一種往復的效果。
我們當然可以使用幀動畫來實現這樣的效果，但是如果使用速度曲線將更為簡便。要使用自定義曲線，我們往往需要一些工具，因為css3動畫使用了三次貝塞爾（cubic bezier）數學函式來生成速度曲線，而這個函式的引數並不直觀。我們可以使用諸如cubic-bezier.com這樣的站點來視覺化地調整速度曲線。
接下來，我們就能夠將該速度曲線寫入animation屬性的引數中，**如下：
.close效果如下圖所示：
CSS3動畫常見特效
transition all 2s 設定哪些屬性可以有過渡效果 all 所有的屬性 注意 並不是所有的屬性都可以過渡 transition property left,width transition duration 5s duration during 在 期間 設定完成過渡所需要的時間 tra...
css3的動畫特效之動畫序列（animation）
首先複習一下animation動畫新增各種引數 1 infinite引數，表示動畫將無限迴圈。在速度曲線和 次數之間還可以插入乙個時間引數，用以設定動畫延遲的時間。如希望使圖示在1秒鐘後再開始旋轉，並旋轉兩次，如下 close hover before程式設計客棧 2 alternate引數。ani...
純css3 載入loading動畫特效
最近專案中要實現當頁面還沒有載入完給使用者提示正在載入的loading，本來是想做個提示的，但是如果放大電腦的解析度就會感覺到很虛，體驗效果很不好。於是就採用css3 js實現這個loading的動畫效果，最終在我們前端工程師的幫助之下完成。所以記錄在這裡，如果感興趣的朋友也可以看看，大家互相焦爐學...