我正在尝试设置一个可在 Chrome、Firefox、Safari 和 Opera 中运行的 css 动画，以动画形式来回调整一些彩色条的宽度，同时保持整体宽度以适合页面。
我在 http://codepen.io/marblegravy/pen/rxhym 设置了一个演示
如果您在 Chrome 中打开它，它会完全按照我想要的方式工作，它会粘在页面的边缘(无论宽度如何，以便它在响应式布局中工作)。
但是在 Firefox、Safari 和 Opera 中，animation-timing-function: linear; 或 animation: bulge4 7s infinite alternate-reverse linear; 中的线性声明似乎是这样。 code> 没有生效，整个事情来回缩放。
我正在使用 Prefix-free在 Codepen 上简化编码，但我认为这不是问题所在。
有什么想法吗？
最佳答案
您正在通过 CSS 技巧/技巧为宽度设置动画。由于 CSS 在不同浏览器中的解释不同，因此它会给出不同的结果。也因为这是一个技巧，所有浏览器都会以自己的方式解释它。
您可以通过 jQuery Ui 进行类似的设置。例如，animate 还可以缩放元素的大小、颜色等。在我看来，这是比使用 CSS 技巧更好、更可靠的替代方法。
更多信息可以在 http://jqueryui.com/docs/animate 找到
关于css - 浏览器之间动画计时功能的差异？我只想要线性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11876973/