Webkit:CSS3二维变换比例+；立方贝塞尔问题（当参数大于1时）

我想使用以下方法为元素创建“弹性”动画：

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);
}

相当简单。使用缩放变换，我完全隐藏元素（或将其缩小到我想要的任何大小）。然后，我使用三次bezier和最后一个参数2指定了一个过渡属性（请参见此处的曲线：）

然后，在第二个阶段（可能处于悬停状态或被其他东西激活，我得到“fired”类），我将其放大到100%

使用

cubic-bezier（）

的预期行为是

scale（）

属性增长超过1，然后返回到1，从而产生“反弹”效果。这适用于其他属性（例如

填充

，

左

，

边距

），但不适用于缩放变换

这不会发生在Chrome（28.0.1500.71 m，Windows7 64位）上。 Firefox和IE10上的Wokrs OK

请参见此处的示例：

---

谢谢你

它与当前的Chrome Canary build 30.0.1561.0配合得很好，所以它看起来像是这个bug：它导致转换的值被钳制在

0

和

1

之间

---

除了使用预先计算的动画外，似乎没有其他解决方法。举个例子吧

谢谢。这真的很奇怪，因为这个bug报告：是在2010-09年报告的，然后被修复了，现在这个bug又回来了并且被修复了？我不能确定，但是看起来老的webkit bug只影响CSS解析器，而这个新问题影响图形引擎。