web前端入門到實戰：css3迴圈，模擬拼多多動畫效果

模擬拼多多動畫效果，最終效果圖如下：

我們看一下實現過程。

主框架是vue開發，做成了一個動畫元件，因為涉及到多個頁面引用，最主要的實現是css3語法實現過程，並且要做到迴圈播放。

左邊出來動畫時間是0.5秒，停留3秒往上走，然後動畫時間0.5秒，停留3秒後然後消失，消失動畫時間0.5秒，總共的時間消耗是7.5秒。可以得到以下計算比例

如果大家對程式設計，web前端感興趣，想要學習，打算深入瞭解這個行業的朋友，歡迎到我們的前端學習扣qun : 784783012 ，不論你是學生還是想轉行的朋友，我都歡迎，每晚分享乾貨，整理的一份2019最新的web前端學習資料和0基礎入門教程分享給大家： 學習前端我們是認真的

0/7.5 = 0%

0.5/7.5 = 6.66%

3.5/7.5 = 46.66%

4/7.5 = 53.33%

7/7.5 = 93.33%

7.5/7.5 = 100%

然後每個比例所對應的css如下