jquerycssjquery-easingcss-transitions

Looking for a “swing”-like easing expressible both with jQuery and CSS3

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:

jquery swing

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.

Solution

  • 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:

    enter image description here

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

    enter image description here

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

    enter image description here

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