css3循環動畫，動畫每次都有延遲

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

咱們看一下實現過程。




主框架是vue開發，作成了一個動畫組件，由於涉及到多個頁面引用，最主要的實現是css3語法實現過程，而且要作到循環播放。

左邊出來動畫時間是0.5秒，停留3秒往上走，而後動畫時間0.5秒，停留3秒後而後消失，消失動畫時間0.5秒，總共的時間消耗是7.5秒。能夠獲得如下計算比例

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以下