CSS3不带'；t冻结

我试图实现的是一个不确定的进度条，在执行后台任务时不会冻结

我已经尝试了以下方法，所有这些方法都会导致进度条在我执行另一项繁重任务时停止其动画：

• .gif
• .svg
• 原生AngularJs材质不确定进度条（它不断移动，但有时向后移动，有时向前移动，没有任何意义）

有趣的是，我成功地创建了一个微调器，它包含一个带有以下动画的刷新图标，在繁重的任务中它从不冻结：

//刷新永不停止的动画

.spin {
  animation : spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform : rotate(0deg);
  }

  100% {
    transform : rotate(360deg);
  }
}

从我所读到的内容来看，一些CSS3动画似乎在单独的浏览器线程中工作，而且如果不需要同时更新，同一线程中的其他一些动画也可以继续工作，例如：像旋转刷新图标这样的简单图像动画，但是对于MD不确定进度条，我还不能达到同样的效果

关于如何实现不可阻挡的进度条，有什么想法吗D

---

感谢

IIRC关键帧在这种方法中受到限制，如果您需要在进度条上进行微调以通过观看任务来停止动画，则需要使用CSS transitions+Javascript。Checkout@Kagerjay嗨，谢谢你的评论。遗憾的是，我不能使用javascript转换，因为它也会冻结动画，我的主要要求是，动画不会在后台任务运行时停止。有什么想法吗？关于javascript“冻结”动画，你有没有尝试过将代码通过loupe。它可能会冻结，因为渲染被阻止。我建议看那个视频，它可能与你的问题有关。另外，如果你想要一个纯CSS实现，你是否尝试过使用两个单独的CSS类（一个是静态非加载进度条，另一个是持续加载条）。您可以使用jquery/javascript切换要使用的状态（例如，让它只切换CSS类）。此外，SVG掩码覆盖可能是您希望在web上查找动画的内容。通常，您不必使用关键帧。有几个选择：1。使用gif（但附带大的.gif文件），2。使用带有转换的CSS精灵图像。像这样。值得思考。老实说，我个人并没有对进度条做过太多的研究。也许你也可以看看像greensock这样专门从事动画的JS库来获得一些想法？