Question

我遇到过这个问题，我几天都拼命想要修复它。我现在所做的是创建一个jsfiddle，其中包含对整个问题的解释以及一个可供您查看的工作示例代码。

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)

我做错了什么？它似乎不适用于IE 10或Opera。

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

Answer 1

从JSFiddle中查看您的示例，此错误似乎是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-animation-name:bounceInDown;-moz-animation-name:bounceInDown;-o-animation-name:bounceInDown;animation-name:bounceInDown}

我希望上面的内容使用非moz（animation-name代替moz-animation-name）和webkit（animation-name代替webkit-animation-name）前缀。

此外，@-o-keyframes声明的重要性是什么？

Answer 2

Opera会在您注意到它之前启动动画，在页面加载期间 - 增加animation-duration以清楚地看到（Demo）。等待DOMContentLoaded将会太慢，至少在已经运行的动画上应用animation-delay。

要解决此问题，请在设置随机延迟后启动动画。例如，您可以在此时添加animation-name（Demo）。

我的javascript（用于随机化css3动画延迟）在IE 10和Opera中没有激发...包括Jsfiddle

2 个答案: