我的javascript（用于随机css3动画延迟）在IE 10和Opera中无法启动…包括JSFIDLE

我遇到过这个问题，从几天以来一直在拼命地试图解决它。我现在所做的是创建一个JSFIDLE，其中包含对整个问题的解释和一个供您查看的工作示例代码

document.addEventListener（“DOMContentLoaded”，函数（）{
变量e，t=document.queryselectoral（“div.bounceInDown”）；
对于（var n=0，r=t.length；n

我做错了什么？它在IE 10或Opera中似乎不起作用

---

编辑：IE10似乎只在刷新页面时触发脚本。

从JSFIDLE中的示例来看，此错误似乎是CSS行：

@keyframes bounceInDown{0%{opacity:0；transform:translateY（-2000px）}60%{opacity:1；transform:translateY（30px）}80%{transform:translateY（-10px）}100%{transform:translateY（0）}.bounceInDown{-webkit动画名称：bounceInDown；-moz动画名称：bounceInDown；-o-animation-name:bounceInDown；动画名称：bounceInDown}

我希望上面使用非moz（

animation name

而不是

moz animation name

）和webkit（

animation name

而不是

webkit animation name

）前缀

---

另外，

@-o-keyframes

语句的意义是什么

Opera似乎在您注意到动画之前就启动了动画，在页面加载过程中-增加

动画持续时间

，以清楚地看到这一点（）。等待

DOMContentLoaded

将太慢，至少对于在已经运行的动画上应用

动画延迟来说是如此

若要修复此问题，请仅在设置随机延迟后启动动画。例如，您可以在当时添加
动画名称
。
是否仅使用webkit API调用？像
WebkitAnimationDelay
=）不确定IE10，我不能在那里测试，但怀疑类似的问题。谢谢你Bergi。那真是太好了。我也喜欢你的解释。我希望这也能帮助其他人。
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)