4.16.4　动画样式

在提供了条纹样式以后，Bootstrap还提供了一个更炫的动画样式，即：让条纹动起来。所需要做的只是在进度条容器元素上再多附加一个active样式即可。示例如下：

  1. <div class="progress progress-striped active">
  2.   <div class="progress-bar" style="width: 45%"></div>
  3. </div>

实现动画样式的源码如下：

  1. // 源码4551行
  2. .progress.active .progress-bar {
  3.   -webkit-animation: progress-bar-stripes 2s linear infinite;/* 2秒过渡40像素，无限循环 */
  4.           animation: progress-bar-stripes 2s linear infinite;/* 其他浏览器 */
  5. }

上述代码在应用时定义了动画过渡，而通过线性渐变可以看出每40个像素为一个区间，所以该动画过渡也是40个像素，2秒完成，然后无限循环。

不同的浏览器定义的动画过渡的代码如下：

  1. // 源码4507行
  2. @-webkit-keyframes progress-bar-stripes {       /* Webkit浏览器 */
  3.   from {    background-position: 40px 0;  }
  4.   to {    background-position: 0 0;  }
  5. }
  6. @keyframes progress-bar-stripes {               /* 其他浏览器 */
  7.   from {    background-position: 40px 0;  }
  8.   to {    background-position: 0 0;  }
  9. }

注意

.active样式必须和.progress-striped样式一起应用才行。而IE浏览器只有IE10以上才支持动画过渡效果。