为了练习我的变换,我创建了一个简单的动画,它使用绝对位置移动了三个div,并将每个div转换为位置。这与预期一样没有任何缺陷
然而,每当webkit浏览器转换div时,div不再保留其动画到下一种颜色的能力,它们仍保持原始颜色(大部分时间是黑色)
我尝试通过为默认div提供背景颜色来修复解决方案,方法是应用不执行任何操作的转换,并将!important
添加到新的背景颜色,但没有任何修复工作。我知道正在到达关键帧,因为元素仍会改变变换和位置,但新的背景颜色不适用
对于我来说,它在最新版本的Firefox中运行得非常好(当评论被删除时)
我有没有看到错误?如果没有,是否有任何解决方法呢?
答案 0 :(得分:3)
在尝试设置transform
和位置(通过left
和top
)
尝试使用transform
,这是一个演示:http://jsfiddle.net/qA4V9/
注意: translate()
函数中的百分比是指对象的宽度和高度,而不是像top
和left
这样的容器,所以你会必须重新考虑这些数字(我使用像素)
好消息:它会有更好的性能(特别是在移动设备上) http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/