使用转换的CSS3动画会导致Webkit上的模糊元素

Question

所以我有一些div应用了各种效果的原生元素(border-radius,box-shadow和transform: scale()).当我为它们制作动画时,会发生两件奇怪的事情:

1. 即使我没有尝试为比例设置动画,如果我没有将比例放在动画中,它也会被忽略.
2. 当我将比例放在动画中时,Webkit模糊了元素

请参阅此处的示例:http://jsfiddle.net/trolleymusic/RHeCL/ - 底部的按钮将触发问题.

第一个问题也发生在Firefox中,所以我猜这是因为这是动画规范应该如何工作的.不是我想要的,但好吧,我会忍受它.

第二个问题很奇怪.我知道它与3d变换有关,因为如果我(仅用于测试目的)声明-webkit-perspective或-webkit-transform-style: preserve-3d;在圆形元素上,它也会导致模糊问题.我的困惑在于,我并没有尝试将z索引转换为全部,我也尝试使用纯粹的动画translateY代替translate.

它发生在Chrome(18),Chrome Canary(20)和Safari(5.1.2和5.1.4)中.

那么,我认为我的想法是正确的吗？我怎样才能避免模糊？

最坏的情况:我可以使用不同大小的元素而不是缩放它们,这不是真正的问题 - 但我认为这将是一个更优雅的解决方案,现在这个问题已经出现了.

Answer 1

请参阅这个答案,了解为什么它会模糊元素:https://stackoverflow.com/a/4847445/814647

以上摘要: WebKit在制作动画之前采用原始尺寸/ CSS,并将其视为图像,然后将其缩放,产生模糊效果.

解决方案:将初始大小设置为您要达到的最大比例,并且最初以较低比例启动它(因此在您的情况下,您希望将大小增加5,并将初始比例设置为0.2)

UPDATE

它忽略了我理解的当前规模的原因是因为你没有专门设置JUST翻译(我现在正在查找CSS).当你跑步时-webkit-animation,它会重置你所有当前的变形(比例),所以你需要确保你有你的比例.我正在查找css以进行更改,因此它仅更改位置: