CSS 带有变换的 CSS3 动画会导致 Webkit 上的元素模糊
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10417890/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 animations with transform causes blurred elements on Webkit
提问by Trolleymusic
So I've got some native elements (divs) with various effects applied to them (border-radius, box-shadowand transform: scale()). When I animate them, two weird things happen:
所以我有一些原生元素（divs ）应用了各种效果（border-radius，box-shadow和transform: scale()）。当我为它们设置动画时，会发生两件奇怪的事情：
- Even though I'm not trying to animate the scale, if I don't put the scale in the animation, it is ignored.
- When I put the scale in the animation, Webkit blurs the elements
- 即使我没有尝试为比例设置动画，如果我不将比例放在动画中，它也会被忽略。
- 当我在动画中设置比例时，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 transformbecause if I (just for testing purposes) declare -webkit-perspectiveor -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 translateYinstead of translate.
第二个问题很奇怪。我知道这与3d 变换有关，因为如果我（仅出于测试目的）声明-webkit-perspective或-webkit-transform-style: preserve-3d;在圆元素上，它也会导致模糊问题。我的困惑是，我并不想改造Z指数作为一切，我一直在使用纯也尝试了动画translateY代替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.
最坏的情况：我可以为元素使用不同的大小而不是缩放它们，这不是一个真正的问题 - 但我认为这将是一个更优雅的解决方案，现在这个问题出现了。
回答by Josh Allen
Refer to this answer as to why it's blurring the element: https://stackoverflow.com/a/4847445/814647
请参阅此答案以了解为什么它会模糊元素：https: //stackoverflow.com/a/4847445/814647
Summary of the above:WebKit is taking the original size/CSS before animating, and treating it as an image, THEN scales it up, producing the blurriness.
以上总结：WebKit 在动画之前采用原始大小/CSS，并将其视为图像，然后将其放大，产生模糊。
Solution:Make initial size the largest scale you're going to, and start it initially with a lower scale (so in your case you'd want to up the size by 5, and set the initial scale to 0.2)
解决方案：使初始大小成为您要使用的最大比例，并以较低的比例开始（因此在您的情况下，您希望将大小增加 5，并将初始比例设置为 0.2）
UPDATE
更新
The reason it ignores the current scale from what I understand is because you're not specifically setting JUST the translate (I'm looking up the CSS for it now). When you run -webkit-animation, it's resetting all your current transforms (scale), so you need to make sure that you have your scales in there. I'm looking up the css to change so it only changes just the position:
它根据我的理解忽略当前比例的原因是因为您没有专门设置仅翻译（我现在正在查找 CSS）。当您运行时-webkit-animation，它会重置您当前的所有变换（比例），因此您需要确保其中有您的比例。我正在查找要更改的 css，因此它只更改位置：
回答by Gianluca Pinoci
The best way I found is to wait the animation is complete, then apply the transforms directly to the element and remove the animation class. Something like this works for me, producing no glitches:
我发现的最好方法是等待动画完成，然后将变换直接应用于元素并删除动画类。像这样的东西对我有用，不会产生任何故障：
$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');
});
I'm using a different library than jQuery, but you get the idea.
我使用的库与 jQuery 不同，但您明白了。
