9

我现在非常频繁地使用 CSS 过渡，但发现它仅限于访问缓入、缓出等。贝塞尔曲线选项似乎允许最大程度的控制，但即使这样也不允许您指定一个实际的缓动方程将模拟弹性缓动等。是否有另一种选择，或者是否需要求助于 javascript 来执行这种类型的动画？

4

4 回答 4

11

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

于 2011-06-01T10:34:02.213 回答
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); }
}

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

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

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

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

于 2011-06-23T18:53:29.427 回答
2

实际上，您不需要 JavaScript 库来支持复杂的缓动函数，例如bounce-ease-in 或 elastic-ease-out。这是 CSS3 动画生成器工具，它为您生成关键帧，并启用了 w3c 规范不支持的 12 个附加缓动功能：

http://www.css3animationgenerator.com/

于 2012-05-16T16:24:02.820 回答
0

我知道，如果您使用的是 mootools，您可以编写自己的方程式：

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

类：Fx.Transition

该课程仅对想要编写自己的缓动方程的数学天才有用。返回具有“easeIn”、“easeOut”和“easeInOut”方法的 Fx 转换函数。

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

祝你好运！

于 2011-06-01T10:39:23.900 回答