寻找一个"摆动"式的缓和,用jQuery和CSS3表达

Question

我必须同时对一个对象执行两个动画.
出于多种原因,我想将jQuery用于垂直动画,将CSS3用于水平动画.

在jQuery方面,swing缓动效果很好:

swing: function (a,b,c,d){return(-Math.cos(a*Math.PI)/2+.5)*d+c}

我正在寻找一种在CSS3过渡中表达这种缓动功能的方法.

如果它是不可能的,我正在寻找一个宽松的功能(例如贝塞尔曲线)是最相似  到  swing
,可用于双方在jQuery和CSS3.请包含指向任何所需插件的链接.

Answer 1

TL; DR

我发现  [.02, .01, .47, 1]Bézier曲线提供了足够好的近似值.

CSS3

-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); 

jQuery的

$(element).animate({ height: height }, 1000, $.easie(.02, .01, .47, 1));            

用jquery.easie(你不妨使用bez).

任务

我用这些图从Sparky672的答案,找出确切的功能和它的参数:

这是一样的y = –x • (x – 2)地方x之间0和1.
所以我创建了一个带有abettercalculator的图形:

我裁剪它并把它放在网上.
然后用于position: absolute叠加立方体-bezier.com,Jim Jeffers建议.

我使用的最终近似值是[.02, .01, .47, 1].