Web前端css3如何实现进度条动画效果？

项目过程中，开始使用了js的requestAnimationFrame方法实现进度条，但是在数据超级多的时候非常影响性能，如此改用css去实现，优化。

*{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;}

}