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

【问题标题】：Is it possible to specify a custom timing functions for CSS transitions?是否可以为 CSS 过渡指定自定义计时功能？
【发布时间】：2013-03-15 18:33:26
【问题描述】：

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

【问题讨论】：

标签： css css-transitions easing-functions

【解决方案1】：

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

【讨论】：

谢谢 - 这看起来是迄今为止最好的，但即使在这里 - 也无法在没有 javascript 的情况下做一些更复杂的事情，比如弹性缓动。
相反，它是 :) 我真的很喜欢 Caesar 工具，但如果您想要有弹性或弹性的过渡，请查看：css3animationgenerator.com - 这是对 Caesar 的一个很好的补充

【解决方案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 的弹性缓动。

【讨论】：

我已经创建了一个 JavaScript 框架，从现在开始很容易做到这一点：github.com/jimjeffers/Sauce

【解决方案3】：

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

http://www.css3animationgenerator.com/

【讨论】：

谢谢埃里克，但这与我的回答基本相同。这使用 javascript 通过 web 表单生成 CSS 关键帧动画。我的解决方案是相同的方法，只是我使用 javascript 在实时文档上以声明方式生成 CSS 关键帧。两者都有优点/缺点。我希望的是支持多个控制点的基于 CSS 的曲线。这将允许我们绕过这个 javascript 关键帧生成。

【解决方案4】：

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

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

类：Fx.Transition

这个类只对数学有用想自己写的天才缓和方程。返回一个 Fx 带有“easeIn”的转换函数， 'easeOut' 和 'easeInOut' 方法。

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

祝你好运！

【讨论】：