我必须同时对一个对象执行两个动画。
出于多种原因，我想将 jQuery 用于垂直动画，将 CSS3 用于水平动画。
在 jQuery 方面，swing缓动效果很好：
swing: function (a,b,c,d){return(-Math.cos(a*Math.PI)/2+.5)*d+c}
我正在寻找一种在 CSS3 过渡中表达这种缓动功能的方法。
如果不可能，我正在寻找一个与 jQuery 和 CSS3 最相似并且可以在 jQuery 和 CSS3 中使用的缓动函数（ 例如 Bézierswing
曲线）。请包含指向任何所需插件的链接。
我发现 [.02, .01, .47, 1]贝塞尔曲线提供了足够好的近似值。
-webkit-transition: all 1s cubic-bezier(.02, .01, .47, 1);
-moz-transition: all 1s cubic-bezier(.02, .01, .47, 1);
transition: all 1s cubic-bezier(.02, .01, .47, 1);
$(element).animate({ height: height }, 1000, $.easie(.02, .01, .47, 1));
与jquery.easie（你不妨使用bez）。
我使用Sparky672 的答案中的这些图表来找出确切的函数及其参数：
y = –x • (x – 2)这与where和x之间的相同。
所以我用abettercalculator创建了一个图表：01
我把它剪下来放到网上。
然后用于position: absolute覆盖由 Jim Jeffers 建议的cubic-bezier.com。
我使用的结果近似值是[.02, .01, .47, 1].
您仅限于预设或简单的三次贝塞尔曲线。我通过在 javascript 中创建一个缓动引擎来解决这个问题，该引擎生成作为转换执行的 CSS 关键帧动画：
bounceDownTransition = new Sauce()
bounceDownTransition.recipe( (element) ->
element.change("y").from(-200).using(Easie.bounceOut)
element.change("scale").from(0).using(Easie.circOut)
)
bounceDownTransition.duration(2).delay(0.5).putOn("element_with_this_id")
你可以在这里查看项目： https ://github.com/jimjeffers/Sauce
通过使用 CSS 关键帧动画，我们通过在 javascript 中使用我们自己的自定义缓动方程获得了 GPU 增强的 CSS 转换性能以及分配给我们的灵活性。
我的缓动引擎使用 Robbert Penner 方程的一个端口。匹配jswing的应该是这样的：
@sineIn: (time,begin,change,duration) ->
-change * Math.cos(time/duration * (Math.PI/2)) + change + begin
https://github.com/jimjeffers/Easie/blob/master/easie.coffee#L218
更新：
根据评论 - 如果您愿意，您可以尝试使用以下工具匹配摆动过渡的曲线：