Question

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

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

由于

彼得

Answer 1

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

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

或者在这里阅读更多相关信息=＆gt; http://api.jquery.com/ready/

将动画代码放在一个类中，比如说.animation

然后使用JQuery。（{3}}）

在您想要设置动画的元素上调用该类

像这样的东西

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

Answer 2

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

Answer 3

function atload() {dom_rdy()}window.onload=atload;

将其粘贴到js的顶部，并使用函数dom_rdy()，它将在dom准备就绪时调用，无需jQuery和其他大量代码。

Answer 4

.bodyclass div{
    some animation css code
}

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

Answer 5

$(window).load(function(){...})

工作正常！

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

Answer 6

@Mavericks解决方案有效。但是对我有用的一个更简单的解决方案是：

CSS：

body {
   display: none;
}

JS：

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

或者你可以使用show / hide。但是，动画在IE10和IE11上变得越来越麻烦。因此，我将代码专门针对这些浏览器更改为：

CSS：

body {
   visibility: hidden;
}

JS：

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

也许这对某人有帮助。