CSS3 transition实现进度条动画

目的

实现一个类似下面所示的动画，当鼠标点击按钮时，进度条会变成不同的长度，长度相应的百分比需从服务器获取。

实现

原本打算使用CSS3的animation，后来发现并不知道如何用JS改变@keyframe中的参数。于是想起之前在犀牛书看过的transition，马上翻书来看，大功告成。

关键代码

.bar {
  width: 0;
  transition: width 1s ease-in;
}

将其初始宽度设为0，使用transiton规定其宽度变化时会发生的行为。待到从服务器获取到参数后，再将其宽度设为相应数字，便可得到想要的效果。