自定义Javascript无法在Internet Explorer 9和10中触发

Question

First of all this is the script located in the head of my document.

<script>
    document.addEventListener("DOMContentLoaded", function () {
        var e, t = document.querySelectorAll("div.bounceInDown");
        for (var n = 0, r = t.length; n < r; n++) {
            e = Math.round(Math.random() * 7e3) + "ms";
            t[n].style.animationDelay = e;
            t[n].style.WebkitAnimationDelay = e
        }
    }, false)
</script>

Now I have a class called "bounceInDown" which has a keyframe animation. All the div elements that have this secondary class applied should bounce down when the website has loaded. Now, the script there makes the bounce with different delay values. It just doesnt work in internet explorer. No idea why. What is wrong with my code?

It works in all browsers except IE

Answer 1

Well for starters IE9 doesn't support animation , that was only added in IE10 :p

Aside from that, it's possible that it's starting the animation before the DOMContentLoaded event has had a chance to update the delay. Rather than setting the animation in CSS and adjusting the delay in JS, try setting the entire animation in JS:

t[n].style.animation = "yourAnimationName 1s "+e;

(Replace that 1s with your animation duration)