Question

我现在经常使用CSS过渡，但发现限制只能访问轻松，缓出等。贝塞尔曲线选项似乎允许最大程度的控制，但即使这样也不允许您指定实际缓和模拟弹性缓和等的方程式。是否有其他选项或是否需要求助于javascript来执行此类动画？

Answer 1

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

Answer 2

我发现用纯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); }
}

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

显然这在某种程度上是强大的 - 因为动画是百分比，你可以很容易地改变他的持续时间并保持效果。

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

在撰写本文时，我不知道在javascript中动态生成CSS动画有任何好的例子。事实上，这可能是另一个问题。总而言之，这是我发现的唯一纯CSS方式，只需用CSS就可以渲染复杂的缓动方程，如弹性缓动。

Answer 3

实际上，您不需要JavaScript库来支持复杂的缓动功能，例如弹跳缓入或弹性缓出。这是CSS3动画生成器工具，它为您生成关键帧，并启用w3c规范不支持的12个额外的缓动函数：

http://www.css3animationgenerator.com/

Answer 4

我知道如果你使用的是mootools，你可以编写自己的等式：

http://mootools.net/docs/core/Fx/Fx.Transitions

分类：Fx.Transition

此课程仅对数学有用   想要自己写的天才   缓和方程。返回一个Fx   转换功能'easeIn'，   'easeOut'和'easeInOut'方法。

也许像jquery或prototype这样的其他库有相同的类，可能它们确实有类似的东西。

祝你好运！

是否可以为CSS过渡指定自定义计时功能？

4 个答案: