3

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

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 的三次贝塞尔曲线分配一个过渡属性（请参见此处的曲线：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

谢谢

4

1 回答 1

1

它与当前的 Chrome Canary 版本 30.0.1561.0 一起工作正常，所以看起来是这个错误：https ://code.google.com/p/chromium/issues/detail?id=178299它导致值在0和1变换。

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

于 2013-07-10T23:53:52.860 回答