Question

所以我有一些原生元素（div s）应用了各种效果（border-radius，box-shadow和transform: scale()）。当我为它们制作动画时，会发生两件奇怪的事情：

即使我没有尝试为比例设置动画，如果我没有将比例放在动画中，也会被忽略。
当我将比例放在动画中时，Webkit模糊了元素

请参阅此处的示例：http://jsfiddle.net/trolleymusic/RHeCL/ - 底部的按钮将触发问题。

第一个问题也发生在Firefox中，所以我猜这是因为这是动画规范应该如何工作的。不是我想要的，但好吧，我会忍受它。

第二个问题很奇怪。我知道这与 3d transform 有关，因为如果我（仅用于测试目的）在圆形元素上声明-webkit-perspective或-webkit-transform-style: preserve-3d;，它也会导致模糊问题。我的困惑在于，我并没有尝试将z索引转换为全部，我也尝试使用纯translateY代替translate来制作动画。

它发生在Chrome（18），Chrome Canary（20）和Safari（5.1.2＆amp; 5.1.4）中。

那么，我认为我的想法是正确的吗？我怎样才能避免模糊？

Answer 1

请参阅此答案，了解元素模糊的原因：https://stackoverflow.com/a/4847445/814647

上述摘要： WebKit在制作动画之前采用原始尺寸/ CSS，并将其视为图像，然后将其缩放，产生模糊效果。

解决方案：将初始尺寸设置为您要达到的最大尺寸，然后以较低的比例启动它（因此在您的情况下，您希望将尺寸增大5，并设置初始比例为0.2）

<强>更新

它忽略了我理解的当前比例的原因是因为你没有专门设置JUST翻译（我现在正在查找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的库，但你明白了。

使用转换的CSS3动画会导致Webkit上的模糊元素

2 个答案: