javascript - Javascript css3 アニメーションが IE 10 および Opera のバウンスの遅延で機能しない

Question

プレーヤー用の css3 アニメーションを作成しました。クラス「BounceInDown」を持つものにはすべて、アニメーションが適用されます。これで、アニメーションにさまざまな遅延値を与えるこの 1 つのコードができたので、非常に優れたランダム ドロップ効果が得られます。もちろん、同じ CSS のバリエーションを作成することもできますが、新規プレイヤーごとに 3 秒、4 秒、5 秒、2.5 秒などの異なるアニメーション遅延を持つ新しい CSS クラスが必要になるため、面倒な作業になります。

これで、jquery と他の JavaScript の直後に、html ドキュメントの先頭にこのコードが追加されました。

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

上のコードは、chrome、Safari、Firefox では完全に機能しますが、最新の Opera と Internet Explorer 10 では機能しません。現在、アニメーションは Opera と IE 10 で機能しますが、すべて同時に起動します。これは、問題が JavaScript だけであることを意味します。 .

私はこれを1週間以上解決しようとしてきましたが、運がありません。誰かが解決策を知っているか、私のものよりも優れたクロスブラウザコードを持っているなら、それは素晴らしいことです. また、すべてが正しく設定されているため、何が間違っているのかについても説明します。サイトに js エラーはありません。すべて規格準拠。