animation - 带有变换的 CSS3 动画导致 Webkit 上的元素模糊

Question

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

1. 即使我没有尝试制作比例动画，但如果我不将比例放入动画中，它就会被忽略。
2. 当我在动画中放置比例尺时，Webkit 会模糊元素

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

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

第二个问题很奇怪。我知道这与 3d transform 有关，因为如果我(仅用于测试目的)声明 -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)

更新

根据我的理解，它忽略当前比例的原因是因为您没有专门设置翻译(我现在正在查找它的 CSS)。当您运行 -webkit-animation 时，它会重置您当前的所有变换(缩放)，因此您需要确保其中有缩放。我正在查找要更改的 css，因此它只会更改位置: