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

作者：魔帝君 | 来源：互联网 | 2023-05-17 06:47

SoIvegotsomenativeelements(divs)withvariouseffectsappliedtothem(border-radius,box-sha

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()))。当我给它们做动画时，会发生两件奇怪的事情:

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 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 个解决方案

#1

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以更改它只更改位置:

#2

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:

我发现的最佳方法是等待动画完成，然后将转换直接应用到元素并删除animation类。像这样的东西对我很管用，不会产生任何问题:

$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不同的库，但是您可以理解。