CSS3动画与WebKit的变换原因迷离元素 [英] CSS3 animations with transform causes blurred elements on Webkit

问题描述

所以，我已经得到了一些自然元素（ DIV S）与适用于他们（各种效果边界半径，的box-shadow 和变换：规模（））。当我动画其中两名奇怪的事情发生了：

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:

1. 虽然我不是动画的规模，如果我不把规模在动画中，它将被忽略。


2. 当我把规模在动画，Webkit的模糊元素

在这里看到的例子： http://jsfiddle.net/trolleymusic/RHeCL/ - 按键底部会触发的问题。

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

第一个问题在Firefox中发生得，所以我猜那是因为这是动画规范是如何工作的。不是我想要的，不过没关系，我会接受它。

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.

第二个问题是只是奇怪。我知道这是一起做的 3D变换，因为如果我（只是为了测试目的）声明 -webkit-角度或 - WebKit的变换式：preserve-3D; 圆上的元素，它会导致模糊的问题也是如此。我的困惑是，我不是来改造Z指数作为一切，我也尝试过使用纯 translateY 而不是翻译动画。

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.

它发生在Chrome（18），Chrome Canary版（20）和Safari（5.1.2＆安培; 5.1.4）

It happens in Chrome (18), Chrome Canary (20) and 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.

推荐答案

请参考这个答案，为什么它的模糊元素： HTTP ：//stackoverflow.com/a/4847445/814647

Refer to this answer as to why it's blurring the element: http://stackoverflow.com/a/4847445/814647

以上的摘要：的WebKit走的是原来的尺寸/ CSS动画前，并把它当作图像，然后扩展它，产生模糊

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.

解决方案：请初始大小你要去，并具有较低的初始规模启动规模最大的（所以你的情况建议您按照5想起来的大小，并设置初始规模0.2）

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)

更新

它忽略从我了解目前规模的原因是因为你不是专门设置只是翻译（现在是我期待了CSS的话）。当您运行 -webkit-动画，它的重置当前所有的变换（规模），所以你需要确保你有你的尺度在那里。我找了css来改变，因此它只会改变只是位置：

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:

这篇关于CSS3动画与WebKit的变换原因迷离元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！