为啥这个 CSS3 动画在 Safari 和 Chrome 中不起作用？

Posted 2023-03-06

【中文标题】为啥这个 CSS3 动画在 Safari 和 Chrome 中不起作用？

【英文标题】：Why isn't this CSS3 animation working in Safari & Chrome?为什么这个 CSS3 动画在 Safari 和 Chrome 中不起作用？

【发布时间】：2012-05-24 05:51:29

【问题描述】：

我使用了 -webkit- 东西，但由于某种原因它没有动画，即使带有 -moz- 前缀的相同代码在 firefox 中也可以工作。

背景是要向下滑动的，然后背景会改变，新的动画应该开始。新的动画也是一样，背景滑进去，然后滑出框，然后新的又进来了。

http://jsfiddle.net/6sQTJ/

【问题讨论】：

只在各处使用像素，而不是混合百分比和像素。由于元素具有固定的高度，这应该不是问题。有关工作示例，请参阅jsfiddle.net/6sQTJ/5。 （PS 如果您将代码中不起作用的部分添加到问题中会很好）

@Gerben 哇，这是因为混合了 % 和像素。那是不起作用的代码......（它在带有 -moz-animation 和 @-moz-keyframes 的 firefox 中工作）但它在 -webkit- 浏览器中没有动画效果。

@Gerben 但现在很好，谢谢:)

【参考方案1】：

@Gerben 给出的正确答案是，您不能在 CSS3 动画中将 % 位置与像素 'px' 位置混合。尽管它可以在 FireFox 中运行，但它不能在其他一些支持 CSS3 动画的浏览器中运行。