模擬拼多多動畫效果甸箱，最終效果圖如下：
我們看一下實現(xiàn)過程育叁。
主框架是vue開發(fā)，做成了一個動畫組件芍殖，因為涉及到多個頁面引用豪嗽，最主要的實現(xiàn)是css3語法實現(xiàn)過程，并且要做到循環(huán)播放豌骏。
左邊出來動畫時間是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%
然后每個比例所對應(yīng)的css如下
