CSS3 Animation in IE8/9

Question

I understand that CSS3 animations do not work in IE. I was just wondering if there is a JavaScript workaround for this problem.

Here's a link to what I want to recreate in IE: http://animation.kashoo.co.uk/

Any advice would be great.

Answer 1

After a quick Google search I found a jQuery plugin that changes jQuery's standard $.animate() function so that it will use CSS3 transitions whenever possible:

$.animate-enhanced

edit:

After trying the above plugin on a site of mine, the site broke. I'm not sure if you will have the same problem or not, but here is my workaround:

You will need Modernizr.js

Basically, you check (with Modernizr) whether the browser supports a given feature, and then decide whether to animate with CSS3 or Javascript.

For example:

(Let's say you are animation an object to move to the right by 200px)

if(Modernizr.csstransitions) {
    // use your appropriate browser prefixes
    yourDomObject.style.transition = 'left 2s';
    yourDomObject.style.left = parseInt(yourDomObject.style.left) + 200 + 'px'

} else {

    var left = parseInt($(yourDomObject).css('left')) + 200 + 'px';
    $(yourDomObject).animate({
        'left' : left
    },2000,'easeOutExpo');
}

Answer 2

Check out jQuery's animate functions: http://api.jquery.com/animate/

Answer 3

There are many JQuery plugins that provide animations. Here's one that has a flip effect similar to the one you are looking for. http://lab.smashup.it/flip/