-webkit-transform 打破背景动画

【问题标题】：-webkit-transform breaking background animation-webkit-transform 打破背景动画
【发布时间】：2014-01-12 06:01:12
【问题描述】：

为了练习我的变换，我创建了一个简单的动画，它使用绝对位置移动三个 div，并将它们中的每一个以及位置变换为位置。这按预期工作，没有任何缺陷

但是，每当 webkit 浏览器转换 div 时，div 不再保留其动画到下一种颜色的能力，它们保持原来的颜色（大部分时间为黑色）

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

对我来说，它在最新版本的 Firefox 中运行良好（当评论被删除时）

我有没有看到的错误吗？如果没有，是否有任何解决方法？

【问题讨论】：

【解决方案1】：

似乎是在尝试为transform 和位置设置动画时出现的问题（通过left 和top）

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

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

【讨论】：