有人知道如何在页面完全加载(包括图像和其他元素)后启动CSS3动画吗?
目前我正在使用延迟来模仿它,但这不是我想要的。
谢谢
Peter
这超出了 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>
div
{
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
function atload() {dom_rdy()}window.onload=atload;
dom_rdy()
一起工作,当dom准备就绪时它将被调用,无需jQuery和其他大量代码。.bodyclass div{
some animation css code
}
bodyclass
应用于标签,然后页面中的所有@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/
也许对某些人有帮助。
$(window).load(function(){...})
运行良好!
但仅在需要加载图像时使用。