How to convert css3 transition to jquery easing function?

Question

I create a slider for both modern browsers and old browsers. I use translate3d and transition to create animations in modern browsers that support css3. I use 2d functions on the top, left and easing for the old browser. I am using css3 easing from here:

http://matthewlein.com/ceaser/

I want to convert it to a javascript function for use in an old browser. I know that there are many facilitating functions, but I just want to know how to convert. Is it possible?

Answer 1

You can use the jQuery Bez plugin for Cubic Bezier Easings in jQuery:

Demo: http://jsfiddle.net/SO_AMK/sbZ7a/

JQuery

$("#box").click(function() { $(this).animate({ "margin-left": 200 }, 2000, $.bez([0.685, 0.595, 0.020, 0.720])); }); // Take the Ceaser output and put the values in, in order, like above. ie cubic-bezier(0.685, 0.595, 0.020, 0.720) would end up as the above value​ 

Plugin: https://github.com/rdallasgray/bez

Answer 2

I know the answer has already been accepted, but I would like to share another great jQuery plugin suitable for making the animation easier.

http://ricostacruz.com/jquery.transit/