Webkit：CSS3 2D变换Scale +立方贝塞尔问题（当参数> 1时） [英] Webkit: CSS3 2D transform Scale + cubic bezier issue (when argument > 1)

问题描述

我想为元素创建一个弹性动画，使用：

I wanted to create a "bouncy" animation for an element using:

div{

  -webkit-transform:scale(0);
  -moz-transform:scale(0);
  -ms-transform:scale(0);

  -webkit-transition:all 0.4s cubic-bezier(0.57, 0.07, 0.44, 2);
  -moz-transition:all 0.4s cubic-bezier(0.57, 0.07, 0.44, 2);
  -ms-transition:all 0.4s cubic-bezier(0.57, 0.07, 0.44, 2);
}
div.fire{

  -webkit-transform:scale(1);
  -moz-transform:scale(1);
  -ms-transform:scale(1);
}

相当简单。使用比例变换，我完全隐藏元素（或缩放到任何我想要的）。然后我使用具有最后一个参数2的立方贝塞尔分配一个transition属性（参见这里的曲线： http://cubic-bezier.com/#.57,.07,.44,2 ）

Fairly simple. Using the scale transform, I hide the element completely (or scale it down to whatever I want). Then I assign a transition property using cubic-bezier with the last argument 2 (see the curve here: http://cubic-bezier.com/#.57,.07,.44,2 )

然后，在第二天阶段（可以悬停或由别的东西激活，我得到'发射'类）我缩放到100％。

Then, on a second stage (could be on hover or activated by something else, I get the 'fired' class) I scale it up to 100%.

使用 cubic-bezier（）的预期行为是 属性增长超过1，然后回到1，创建一个反弹效果。这适用于其他属性（例如 padding ， left ， margin

The expected behaviour using cubic-bezier() would be that the scale() property grows past 1 and then comes back to 1, creating a "bounce" effect. This works for other properties (such as padding, left, margin) but not for the scale transform.

Chrome不会发生这种情况（28.0.1500.71米，Windows 7 64位）。
在Firefox和IE10上的Wokrs OK

This doesn't happen on Chrome (28.0.1500.71 m, Windows 7 64bit). Wokrs OK on Firefox and IE10

请参阅示例：
http://codepen.io/anon/pen/oiexl

谢谢

推荐答案

它与目前的Chrome Canary build 30.0.1561.0兼容，所以看起来像是这个错误： https://code.google.com/p/chromium/issues/detail?id=178299 它会导致值在 0 和 1 之间夹住变换。

It's working fine with the current Chrome Canary build 30.0.1561.0, so it looks like it's this bug: https://code.google.com/p/chromium/issues/detail?id=178299 It causes the value to get clamped between 0 and 1 for transforms.

似乎没有解决方法，除了使用预先计算的动画。请尝试 http://www.css3animationgenerator.com/

There doesn't seem to be a workaround, other than using precalculated animations. Try for example http://www.css3animationgenerator.com/

这篇关于Webkit：CSS3 2D变换Scale +立方贝塞尔问题（当参数> 1时）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！