個人網站：www.dzyong.top
微信公衆號：《前端筱園》
本期講解兩個系列的加載效果，先看效果
這兩種效果在網站中都會經常遇到，我會分別以一個例子來進行詳細的剖析。
CSS加載動畫萬變不離其宗，那就是animation，可以把它看做AE中的導軌，我們只需要在合適的點位讓它展現本應該展現的狀態即可。
本期的加載動畫與上期的有所不同，本期要用到animation的延遲時間屬性，上面展示的而每個動畫都是由多個相同元素組成，仔細觀察，其實每個元素的運動週期是完全相同的，唯一不同的地方就在於起點時間。因此我們只要合理的掌握每個元素的開始時間點即可。
關鍵點：動畫開始時間、動畫週期點的選擇
先看一下第一個要講解的效果
這裏直接HTML結構和CSS的基礎樣式比較簡單，就不再過多的講解，直接上代碼
HTML：
<div class="warp"><div class="line line1"></div><div class="line line2"></div><div class="line line3"></div><div class="line line4"></div></div>
CSS:
.warp{position: relative;height: 100px;margin: 40px;}/* 線型動畫 */.line{display: inline-block;position: absolute;bottom: 0;width: 12px;height: 15px;margin: 3px;border-radius: 12px;background: #69d3de;}
關鍵的是動畫部分，這裏的每個元素都共用同一個動畫，整個過程可以看出只是元素的高度在發生變化。可以定格3個點，起始高度->最高高度->起始高度。
@keyframes line-loading{0%{height: 15px;}50%{height: 35px;}100%{height: 15px;}}
仔細觀察的話可以看出一個動畫週期是對稱的，即高度越小變化的速度越慢。那麼這裏的動畫速度曲線應爲ease-in-out（動畫以低速開始和結束）。若週期爲1.5s，本例子每個元素的起始時間分別爲0/0.3/0.6/0.9。當然你也可以設置成其他的開始時間序列，所看到的效果也會有所差別，不過一定要成等比。
.line1{left: 5px;animation: line-loading 1.5s 0s ease-in-out infinite;}.line2{left: 25px;animation: line-loading 1.5s .3s ease-in-out infinite;}.line3{left: 45px;animation: line-loading 1.5s .6s ease-in-out infinite;}.line4{left: 65px;;animation: line-loading 1.5s .9s ease-in-out infinite;}
第二個系列
這個效果與上面一個大同小異，只是從高度的維度變爲了位置，但是仔細觀察的話，還加入了顏色的改變，所以這個動畫對時間點的選擇與狀態把控十分重要。
HTML：
<div class="warp"><div class="ball ball1"></div><div class="ball ball2"></div><div class="ball ball3"></div><div class="ball ball4"></div><div class="ball ball5"></div></div>
CSS基礎：
.ball{height: 15px;width: 15px;display: inline-block;border-radius: 50%;background: pink;position: relative;top: 40px;}
先分析一下整個週期的過程：起點位置》上升到最高點》回到起點位置》等待一段時間（注意這裏不是回到起點後馬上就改變了顏色）》改變另一種顏色》變回原顏色
運動週期分析完成後，根據每個點的狀態可得到動畫過程如下：
@keyframes ball-loading{0%{top: 40px;background: pink;}25%{top: 10px;background: pink;}50%{top: 40px;background: pink;}65%{background: pink;}85%{background: #f7eaec;}100%{background: pink;}}
每個元素的開始時間參考如下：
.ball1{animation: ball-loading 2s 0s ease-in-out infinite;}.ball2{animation: ball-loading 2s .2s ease-in-out infinite;}.ball3{animation: ball-loading 2s .4s ease-in-out infinite;}.ball4{animation: ball-loading 2s .6s ease-in-out infinite;}.ball5{animation: ball-loading 2s .8s ease-in-out infinite;}
總結
本期的重點是如何去設定時間點及其對應的狀態，對起點時間的把控。對於一個複雜的動畫，先從一個週期分析，分析它經歷了哪幾個階段，每個階段的狀態，然後再去選擇時間點和動畫線性曲線。
關注微信公衆號《前端筱園》，博客內容同步
