-webkit转换打破背景动画

Question

在试图实践我的转换，我创建了一个简单的动画，使用绝对位置移动三个div并将其转换为每个位置以及位置。这只是工作如预期没有任何瑕疵

但是，每当WebKit浏览器变换的div，的div不再保留自己的动画到下一个颜色的能力，他们仍然是他们原来的颜色（大多数时候黑）

Here's a jsFiddle

我试图通过提供一个默认的DIV背景颜色，通过应用变换什么也没做，并添加!important到新的背景颜色，但没有修复工作修复解决方案。我知道正在达到关键帧，因为元素仍然改变变换位置，但是新的背景颜色是不适用

它完美罚款的Firefox的最新版本，我（当注释取出）

我有没有看到错误？如果没有，这有什么解决办法吗？

Answer 1

看起来它试图（通过left和top）动画都transform和位置时的这个问题似乎是

尝试使用刚刚transform，这里有一个演示：http://jsfiddle.net/qA4V9/

注意：在translate()函数中的百分比指的是对象的宽度和高度，而不是像top和left那样的容器，所以您必须重新考虑这些数字（我使用了像素）

好消息：将有更好的性能（尤其是在移动） http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/