是否可以为CSS转换指定自定义计时函数？

Question

我现在经常使用CSS转换，但我发现它的局限性在于只能访问ease-in，ease-out等。bezier-curve选项似乎允许最大程度的控制，但即使这样也不允许你指定一个实际的放松方程来模拟弹性放松等。有没有其他选择，或者需要求助于javascript来执行这种类型的动画？

Answer 1

我发现没有办法使用纯CSS进行弹性转换。然而，你可以作弊，做一个CSS动画。这是苹果在他们的网站上使用的：

@-webkit-keyframes open-1 {
    from { opacity:0; -webkit-transform:translate3d( 210px, -145px, 0); }
    25%  { opacity:1; -webkit-transform:translate3d( -15.6px, 4.1px, 0); }
    30%  { opacity:1; -webkit-transform:translate3d( -10.3px, 2.7px, 0); }
    35%  { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
    40%  { opacity:1; -webkit-transform:translate3d( 4.5px, -1.2px, 0); }
    45%  { opacity:1; -webkit-transform:translate3d( 2.9px, -0.8px, 0); }
    50%  { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
    55%  { opacity:1; -webkit-transform:translate3d( -1.3px, 0.3px, 0); }
    60%  { opacity:1; -webkit-transform:translate3d( -0.8px, 0.2px, 0); }
    65%  { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
    70%  { opacity:1; -webkit-transform:translate3d( 0.4px, -0.1px, 0); }
    75%  { opacity:1; -webkit-transform:translate3d( 0.2px, -0.1px, 0); }
    80%  { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
    85%  { opacity:1; -webkit-transform:translate3d( -0.1px, 0, 0); }
    90%  { opacity:1; -webkit-transform:translate3d( -0.1px, 0, 0); }
    to   { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
}

这些动画在很大程度上用于苹果自己的网站：http://www.apple.com/mac/

显然，这在某种程度上是强大的--因为动画是百分比，所以您可以轻松地更改持续时间并保留效果。

然而，这仍然是非常静态的。假设您想要单击一个按钮，并让它执行弹性缩放动画。没问题，每个按钮都可以反复使用一个动画。但是，假设您想让一个元素弹性地将其位置捕捉到用户最近在屏幕上单击或点击的位置。在这种情况下，您需要动态地重新计算关键帧，然后将动画应用于元素。

在写这篇文章的时候，我还不知道有什么好的例子可以在javascript中动态生成CSS动画。事实上，这可能需要另一个问题。总而言之，这是我发现的唯一一种纯CSS方法，可以呈现复杂的放松方程，比如纯粹使用CSS的弹性放松。

Answer 2

您可以使用Caesar为不同的方程式生成CSS。

Answer 3

实际上，你不需要一个JavaScript库来支持像弹跳缓入或弹性缓出这样的复杂的缓动功能。这是CSS3动画生成器工具，它可以为您生成关键帧，并启用w3c规范不支持的12个附加缓动功能：

http://www.css3animationgenerator.com/