IE10中的CSS动画持续时间错误

我在一个项目中使用引导动画进度条，但我在IE10中遇到了一个动画错误。当页面呈现时，进度条的宽度为10%，5秒后，宽度增加到100%。动画的默认持续时间为2秒，但当宽度增加时，动画的持续时间不会如此有效地缩放，动画速度会增加10倍

我用一个例子来说明我的意思。在IE中，有没有办法使动画速度与宽度成比例

HTML

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

---

您可以通过以下方式覆盖引导css：

@keyframes progress-bar-stripes {
  from {
    background-position: 0 -40px;
  }
  to {
    background-position: 0 0;
  }
}

---

您可以通过以下方式覆盖引导css：

@keyframes progress-bar-stripes {
  from {
    background-position: 0 -40px;
  }
  to {
    background-position: 0 0;
  }
}

问题 目前还不清楚这是IE10特有的动画持续时间错误，因为为动画指定持续时间的事实意味着它与进度条必须移动的“距离”不成比例

当然，除非你指的是条纹动画？如果您指的是这一点，那么解决我在下面提出的问题（即不使用CSS和JS制作动画）可能会有所帮助，如果不是，您仍然可以应用相同的想法，而不是覆盖过渡，您可以替代

动画持续时间

，并且持续时间仍然基于进度条的宽度。然而，我无法重现这个问题

事实上，您的演示同时使用jQuery和CSS转换可能会在IE10中产生奇怪的效果，就像在其他浏览器中一样

可能的解决办法 如果我理解您试图实现的目标，那么您所需要做的就是根据进度条父级的维度大小延长持续时间。您可以这样做-覆盖引导CSS-就像这样。我包括两个横条，以表明它们不是同时完成的，但应具有相似的速度：

将代码分解为

运行栏

函数并包装为

设置超时

只是为了复制

5000

延迟，并在代码实际运行之前暂停；代码实际工作不需要它们。但是，如果一次页面上有多个进度条，则需要使用

$。每个

如果您指的是条带化动画，只需在下面切换出
过渡，并替换为
动画持续时间。重置动画持续时间一次的唯一问题是，现在您可能会发现，仅在（例如10%）时，动画速度非常慢。但是，如果您实际上是在事情进展时以编程方式更新进度条（这是有意义的），则可以基于进度条的当前完成百分比来更新动画持续时间。因此，您可以使用
bar.parent（）/100*百分比来计算
，而不只是使用
bar.parent（）


$（函数（）{
var runbar=函数（）{
$（“.progress bar”）
.每个（功能（i，elm）{
var bar=$（elm）；
bar.css({
“转换”：“宽度”+（bar.parent（）.width（）/200）+“s线性0”，
“宽度”：“100%”
});
})
;
};
设置超时（运行条，5000）；
});

完成10%
完成10%
问题
目前还不清楚这是IE10特有的动画持续时间错误，因为为动画指定持续时间的事实意味着它与进度条必须移动的“距离”不成比例

当然，除非你指的是条纹动画？如果您指的是这一点，那么解决我在下面提出的问题（即不使用CSS和JS制作动画）可能会有所帮助，如果不是，您仍然可以应用相同的想法，而不是覆盖过渡，您可以替代
动画持续时间，并且持续时间仍然基于进度条的宽度。然而，我无法重现这个问题

事实上，您的演示同时使用jQuery和CSS转换可能会在IE10中产生奇怪的效果，就像在其他浏览器中一样

可能的解决办法
如果我理解您试图实现的目标，那么您所需要做的就是根据进度条父级的维度大小延长持续时间。您可以这样做-覆盖引导CSS-就像这样。我包括两个横条，以表明它们不是同时完成的，但应具有相似的速度：

将代码分解为
运行栏
函数并包装为
设置超时
只是为了复制
5000
延迟，并在代码实际运行之前暂停；代码实际工作不需要它们。但是，如果一次页面上有多个进度条，则需要使用
$。每个

如果您指的是条带化动画，只需在下面切换出
过渡，并替换为
动画持续时间。重置动画持续时间一次的唯一问题是，现在您可能会发现，仅在（例如10%）时，动画速度非常慢。但是，如果您实际上是在事情进展时以编程方式更新进度条（这是有意义的），则可以基于进度条的当前完成百分比来更新动画持续时间。因此，您可以使用
bar.parent（）/100*百分比来计算
，而不只是使用
bar.parent（）


$（函数（）{
var runbar=函数（）{
$（“.progress bar”）
.每个（功能（i，elm）{
var bar=$（elm）；
bar.css({
“转换”：“宽度”+（bar.parent（）.width（）/200）+“s线性0”，
“宽度”：“100%”
});
})
;