css - Webkit:CSS3 2D 变换 Scale + cubic bezier 问题(当参数 > 1 时)

Question

我想为一个元素创建一个“有 flex ”的动画:

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

相当简单。使用缩放变换，我完全隐藏了元素(或将其缩小到我想要的任何大小)。然后我使用 cubic-bezier 和最后一个参数 2 分配一个过渡属性(参见此处的曲线:http://cubic-bezier.com/#.57,.07,.44,2)

然后，在第二个阶段(可能悬停或被其他东西激活，我得到“解雇”类)我将它放大到 100%。

使用 cubic-bezier() 的预期行为是 scale() 属性增长超过 1 然后回到 1，从而产生“反弹”效果.这适用于其他属性(例如 padding、left、margin)，但不适用于缩放变换。

这不会发生在 Chrome(28.0.1500.71 m，Windows 7 64 位)上。在 Firefox 和 IE10 上工作正常

请看这里的例子: http://codepen.io/anon/pen/oiexl

谢谢

Answer 1

它在当前的 Chrome Canary 版本 30.0.1561.0 上运行良好，所以看起来是这个错误:https://code.google.com/p/chromium/issues/detail?id=178299它会导致值被限制在 0 和 1 之间以进行转换。

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