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

Question

所以我有一些原生元素(div s(，并对其应用了各种效果(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(

更新

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

Answer 2

我发现最好的方法是等待动画完成，然后将转换直接应用于元素并删除动画类。 这样的东西对我有用，不会产生任何故障：

$m.bindOnce($m('win-text'), 'webkitAnimationEnd', function(){ //avoid blurred problem with animating scale property in webkit
    $m('win-text').style.webkitTransform = 'scale(1.5) translateY(-60px)';
    $m.removeClass($m('win-text'), 'final');
});

我使用的是与jQuery不同的库，但你明白了。