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

So I've got some native elements (divs) with various effects applied to them (border-radius, box-shadow and transform: scale()). When I animate them, two weird things happen:

因此，我得到了一些具有各种效果的本机元素(border-radius、box-shadow和transform: scale()))。当我给它们做动画时，会发生两件奇怪的事情:

1. Even though I'm not trying to animate the scale, if I don't put the scale in the animation, it is ignored.
2. 虽然我并不是想让比例动起来，但是如果我不把比例放到动画中，它就会被忽略。
3. When I put the scale in the animation, Webkit blurs the elements
4. 当我在动画中加入比例时，Webkit模糊了元素

See the example here: http://jsfiddle.net/trolleymusic/RHeCL/ - the buttons at the bottom will trigger the issues.

请参见这里的示例:http://jsfiddle.net/trolleymusic/RHeCL/——底部的按钮将触发问题。

The first issue happens in Firefox too, so I'm guessing that it's because that's how the animation spec is supposed to work. Not what I wanted, but ok, I'll live with it.

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

The second issue is just weird. I know it's to do with 3d transform because if I (just for testing purposes) declare -webkit-perspective or -webkit-transform-style: preserve-3d; on the circle elements, it causes the blur issue as well. My confusion is that I'm not trying to transform the z index as all, and I have also tried the animations using purely translateY instead of translate.

第二个问题很奇怪。我知道这与3d变换有关，因为如果我(为了测试目的)声明-webkit-perspective或-webkit- transformstyle: preserve-3d;对于圆形元素，它也会导致模糊问题。我的困惑是，我并不是要把z索引转换成全部，我也尝试过使用纯translate而不是translate。

It happens in Chrome (18), Chrome Canary (20) and Safari (5.1.2 & 5.1.4).

它发生在Chrome(18)、Chrome Canary(20)和Safari(5.1.2 & 5.1.4)。

So, am I right in what I think is happening? And how can I avoid the blurriness?

那么，我的想法对吗?我怎样才能避免模糊呢?

Worst-case scenario: I can just use different sizes for the elements instead of scaling them, that's not really a problem - but I thought this would be a more elegant solution and now this issue has cropped up.

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

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');
});