Twitter bootstrap 引导进度条未设置动画

我已经使用将引导安装到我的

rails4

应用程序中

我已将动画进度条的代码直接从复制粘贴到我的页面中：

<div class="progress progress-striped active">
   <div class="progress-bar"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
      <span class="sr-only">45% Complete</span>
   </div>
</div>

完成45%

但该条没有设置动画。我唯一能想到的是，我在

sass

变量中更改了条的颜色

为什么它没有动画

编辑

我的酒吧是什么样子的：

编辑

下面是我使用

活动类时应用的CSS：
只是半透明的白色条纹（
rgba（255255255.15）
）不会出现在某些颜色上

使用Chrome浏览器的
黄色
。如果我们在Photoshop中使用这种颜色，然后在上面放置一条白色条纹，不透明度为.15，它是不可见的。我把轮廓放在这里，这样你可以看到条纹在哪里


因此，对于某些颜色，您可能需要调整条纹颜色的alpha。我已将一类
.progress bar primary
添加到
.progress bar
中，方法与添加
.progress bar warning
等类似

<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-primary"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

您是否确实尝试过将更改还原为颜色？如果不是，那就值得一试，看看这是否是你的问题

如果是这样的话，我建议你把它默认为股票，然后把它独立出来，看看它是怎么回事。这可能是由于html中的其他内容或其他内容存在冲突，因此如果您将其加载到带有库存设置的空白文档中

现在我想不出还有什么别的了。我希望它能起作用。
将
class=“bar”
替换为
class=“progress bar”
将关键帧css放在css文件的顶部，而不是嵌套（如果使用sass）不要在媒体查询中添加它。
您是如何更改这些颜色的？@marzapower刚刚更改了我的样式表中的
$brand primary
变量。它是否在您的实现中工作过（即，在您更改颜色之前）？您是使用
较少的样式表
还是
css样式表
？我希望您在安装gem时遵循了所有的说明。我按照说明模拟了确切的场景，它像champ一样工作。进度条的动画是通过css应用的。在开发工具中检查进度条元素时，是否看到正在应用的.progress.active.progress bar{-webkit动画：进度条2s linear infinite；动画：进度条2s linear infinite；}样式？我只更改了其中一个进度条上的颜色。例如，如果我尝试
进度条信息
，它仍然不起作用。我能看到白色的条纹。。他们只是不动。我在我的问题中添加了我的酒吧的外观。你在用什么浏览器？我在用chrome。在引导文档中，动画条看起来很好。所以当你将$brand primary重置为它之前的状态时，它再次工作？哦，当你说你更改了sass变量的颜色时，我感到困惑，听起来就像你之前那样，没有问题。你也试过做股票的东西，但它不起作用。你重新下载引导并试用了吗？顺便看看这个教程，它没有使用引导，但很酷：
.progress-bar-primary {
  background-color: yellow;
}

.progress-striped .progress-bar-primary {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .75)   25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent);
}