Question

I have to perform two animations on an object simultaneously.
For a number of reasons, I want to use jQuery for the vertical animation and CSS3 for the horizontal one.

On jQuery side, swing easing works great:

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

I’m looking for a way to express this easing function in CSS3 transition.

If it is impossible, I’m looking for an easing function (e.g. a Bézier curve) that is most similar to swing
and can be used both in jQuery and CSS3. Please include link to any required plugins.

Answer 1

TL;DR

I found that [.02, .01, .47, 1] Bézier curve provides a good enough approximation.

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

with jquery.easie (you might as well use bez).

---

The Quest

I used these graphs from Sparky672’s answer to find out the exact function and its arguments:

It’s the same as y = –x • (x – 2) where x is between 0 and 1.
So I created a graph with abettercalculator:

I cropped it and put it online.
Then used position: absolute to overlay cubic-bezier.com, suggested by Jim Jeffers.

The resulting approximation that I used was [.02, .01, .47, 1].