css - 浏览器之间动画计时功能的差异？我只想要线性

Question

我正在尝试设置一个可以在 Chrome、Firefox、Safari 和 Opera 中运行的 CSS 动画，以在保持整体宽度以适应页面的同时来回设置一些彩色条的宽度。

如果你在 Chrome 中打开它，它会完全按照我想要的方式工作，它会粘在页面的边缘（无论宽度如何，它都会在响应式布局中工作）。

然而，在 Firefox、Safari 和 Opera 中，似乎animation-timing-function: linear;or 中的线性声明animation: bulge4 7s infinite alternate-reverse linear;没有生效，整个事情来回缩放。

我正在使用无前缀来简化 Codepen 上的编码，但我认为这不是问题所在。

有任何想法吗？

score 2 · Accepted Answer

您正在通过 CSS Tricks/Hacks 为宽度槽设置动画。由于 CSS 在不同浏览器中的解释不同，它会给出不同的结果。也因为这是一个技巧，所有浏览器都会以自己的方式解释它。

您可以通过 jQuery Ui 进行类似的设置。例如，动画还可以缩放元素、颜色等的大小。在我看来，这是一个比使用 CSS 技巧更好、更可靠的替代方案。

1 回答 1