javascript - CSS3 Animation in IE89 - Stack Overflow

admin管理员组

文章数量:1208155

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

Any advice would be great.

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.

• javascript
• internet-explorer
• animation
• css

Share Improve this question Follow asked Jun 1, 2012 at 17:22 Michael BulpittMichael Bulpitt 9111 gold badge11 silver badge22 bronze badges 2

• Possible duplicate of stackoverflow.com/q/5612352/504930 – devius Commented Jun 1, 2012 at 17:29
• You should select which answer solved your problem :) – xyhhx Commented Feb 14, 2014 at 20:41

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 11

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

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

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/

本文标签： javascriptCSS3 Animation in IE89Stack Overflow