Animation 加载整个页面后启动css3动画

有人知道如何在页面其余部分完全加载（图像和所有内容）后启动css3动画吗

我现在正在使用延迟来模拟它，但这不是我想要的

谢谢

---

Peter

这超出了CSS的范围，但是使用JQuery非常简单

$(document).ready(function() {/*You code here*/ }

或者在此处阅读更多信息=>

将动画代码放在类中，例如.animation

然后使用JQuery.addclass（）对要设置动画的元素调用该类（）

像这样的

   <script type="text/javascript">
    $(document).ready(function() {
    $("#element-to-animate").addClass("animation"); 
    });
   </script>

$（文档）.ready（函数（）{
$（“#要设置动画的元素”）.addClass（“动画”）；
});

将它粘贴到js的顶部，然后使用函数

dom_rdy（）

在dom就绪时调用它，而不需要jQuery和其他大量代码

.bodyclass div{
    some animation css code
}

body load后，只需将

bodyclass

应用于body标记，页面中的所有div都将可设置动画。然后@Husar说，这个解决方案是有效的，因为我们只需要在页面加载完成后搜索body元素，但在其他情况下，我们需要更改所有需要设置动画的元素类名。

$（window）.load（function（）{…}）

很好

---

但仅当您希望加载图像时使用。

@Mavericks解决方案有效。但对我来说，一个简单得多的解决方案是：

   div
    {
    -webkit-animation-delay: 5s; 
     animation-delay: 5s;
    }

CSS:

JS:

也可以使用“显示/隐藏”。但是，动画在IE10和IE11上出现了问题。因此，我将这些浏览器的代码更改为：

CSS:

JS:

我还发现：

---

也许这会对某人有所帮助。

谢谢你的回复，但是动画的代码在我的css页面上，我如何将css合并到函数中？$（文档）。准备好（函数（）{…}）不要等待图像加载。我建议改为$（window）.load（function（）{…}）。如果要像您所说的那样成为一个类，请更改为.element以设置动画。我不希望初学者被这搞糊涂。请给你的答案添加一些解释。请在投票否决之前告诉我原因，因为这对我很有效。

   div
    {
    -webkit-animation-delay: 5s; 
     animation-delay: 5s;
    }

body {
   display: none;
}

(function() {
    $('body').css('display', 'block');
})();

body {
   visibility: hidden;
}

(function() {
    $('body').css('visibility', 'visible');
})();