Question

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

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米，Windows 7 64位）上。 Firefox和IE10上的Wokrs OK

见这里的例子： 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/

Webkit：CSS3 2D变换Scale + cubic bezier问题（当参数＆gt; 1时）

1 个答案: