-webkit-transformation打破背景动画

时间:2013-12-24 00:45:24

标签: css google-chrome background css-animations css-transforms

为了练习我的变换,我创建了一个简单的动画,它使用绝对位置移动了三个div,并将每个div转换为位置。这与预期一样没有任何缺陷

然而,每当webkit浏览器转换div时,div不再保留其动画到下一种颜色的能力,它们仍保持原始颜色(大部分时间是黑色)

Here's a jsFiddle

我尝试通过为默认div提供背景颜色来修复解决方案,方法是应用不执行任何操作的转换,并将!important添加到新的背景颜色,但没有任何修复工作。我知道正在到达关键帧,因为元素仍会改变变换和位置,但新的背景颜色不适用

对于我来说,它在最新版本的Firefox中运行得非常好(当评论被删除时)

我有没有看到错误?如果没有,是否有任何解决方法呢?

1 个答案:

答案 0 :(得分:3)

在尝试设置transform和位置(通过lefttop

时,会出现问题

尝试使用transform这是一个演示:http://jsfiddle.net/qA4V9/

注意: translate()函数中的百分比是指对象的宽度和高度,而不是像topleft这样的容器,所以你会必须重新考虑这些数字(我使用像素)

好消息:它会有更好的性能(特别是在移动设备上) http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/