CSS3 Transitions with Javascript Fallback

Question

Is there a javascript framework out there that will use CSS3 Transitions for effects like changing opacity or moving elements but will fall back to using javascript setInterval/

Answer 1

Check out Addy Osmani's article. It is a good summary of the current solutions with jQuery, specifically:

• jquery.transition.js by Louis-Rémi Babé
• jQuery.animate-enhanced.js by Ben Barnett

Answer 2

One of my colleagues has written a micro library offering a limited JS fallback to Transitions: http://blogs.msdn.com/b/eternalcoding/archive/2011/12/06/css3-transitions.aspx

TRANSITIONSHELPER.computeCubicBezierCurveInterpolation = function (t, x1, y1, x2, y2) {
    // Extract X (which is equal to time here)
    var f0 = 1 - 3 * x2 + 3 * x1;
    var f1 = 3 * x2 - 6 * x1;
    var f2 = 3 * x1;

    var refinedT = t;
    for (var i = 0; i < 5; i++) {
        var refinedT2 = refinedT * refinedT;
        var refinedT3 = refinedT2 * refinedT;

        var x = f0 * refinedT3 + f1 * refinedT2 + f2 * refinedT;
        var slope = 1.0 / (3.0 * f0 * refinedT2 + 2.0 * f1 * refinedT + f2);
        refinedT -= (x - t) * slope;
        refinedT = Math.min(1, Math.max(0, refinedT));
    }

    // Resolve cubic bezier for the given x
    return 3 * Math.pow(1 - refinedT, 2) * refinedT * y1 +
            3 * (1 - refinedT) * Math.pow(refinedT, 2) * y2 +
            Math.pow(refinedT, 3);
};

Maybe it could be enough or a good base to achieve what's you're looking for?

Bye,

David

Answer 3

sadly none of these alternatives seem to allow you to use the easings, like bounce.

My attempt to use animate-enhanced moved the element an inch and then just removed it. I really would like to keep the bounce instead of just a cubic or linear easing.

Answer 4

Check out the YUI 3 Transition module, it does just that.

Answer 5

You could look at using http://www.modernizr.com/

Answer 6

To sum it up, there are some plugins for big frameworks (see other answers):

• jQuery (jquery.transition.js and jquery.animate-enhanced.js)
• MooTools

Other frameworks already use CSS transitions where possible:

• YUI
• rightjs

Are there any micro-libraries?