整个页面加载完成后启动CSS3动画

Question

有人知道如何在页面完全加载（包括图像和其他元素）后启动CSS3动画吗？

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

谢谢

Peter

- user127181

Answer 1

这超出了 CSS 的范畴，但使用 JQuery 很容易实现。

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

或者在这里阅读更多信息 => http://api.jquery.com/ready/

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

然后使用 JQuery 的 .addclass() (http://api.jquery.com/addClass/) 在您希望进行动画的元素上调用该类。

就像这样

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

- Maverick

---

谢谢您的回复，但是动画代码存在于我的CSS页面上，我该如何将我的CSS合并到函数中？ - user127181

$(document).ready(function(){...}) 不会等待图片加载完成。 我建议改用 $(window).load(function(){...})。 - gitesh.tyagi

请将.element-to-animate更改为类，就像您所说的那样。我不希望初学者因此而感到困惑。 - Jesse Head

Answer 2

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

- user3916054

---

请在您的答案中添加一些解释。 - SeniorJD

Answer 3

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

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

- Maxim Aleksandrovich

Answer 4

.bodyclass div{
    some animation css code
}

在页面加载完成后，只需将bodyclass应用于标签，然后页面中的所有

都可以进行动画处理。这种解决方案比@Husar所说的更有效，因为我们只需要在页面加载完成后搜索元素，但在其他情况下，我们需要更改所有需要进行动画处理的元素类名。

- Rajkamal Subramanian

Answer 5

@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');
})();

我还发现了这个：https://css-tricks.com/transitions-only-after-page-load/

也许对某些人有帮助。

- shet_tayyy

---

请在投票之前告诉我原因，因为这对我很有效。 - shet_tayyy

Answer 6

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

运行良好！

但仅在需要加载图像时使用。

- gitesh.tyagi