Web前端css3如何實現(xiàn)進度條動畫效果？

項目過程中，開始使用了js的requestAnimationFrame方法實現(xiàn)進度條，但是在數(shù)據(jù)超級多的時候非常影響性能，如此改用css去實現(xiàn)，優(yōu)化。

*{margin: 0;padding: 0}

.box{width: 100px;height: 10px;border-radius: 10px;background: #999;margin: 100px auto;border: 1px solid #ff6780;}

.child{position: relative;height:100 %;border-radius:inherit;}

.process-animate{background: #ff6780;position: absolute;left: 0;top: 0;bottom: 0;border-radius:inherit;

animation: process 1s linear forwards ;

}

@keyframes process

{

0%{

left:0;right:100 %;

}

20%{

right:80%

}

40%{

right:60%;

}

60%{right:40%;}

80%{right:20%;}

100 %{right:0;}

}