CSS 在整个页面加载后启动 css3 动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5771378/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
start css3 animation after entire page load
提问by user127181
Anyone know how to start a css3 animation after the rest of the page loads completely (images and everything)?
任何人都知道如何在页面的其余部分完全加载（图像和所有内容）后启动 css3 动画？
I am using a delay right now to mimic it but this is not what I'm looking for.
我现在正在使用延迟来模仿它，但这不是我想要的。
Thanks
谢谢
Peter
彼得
回答by Maverick
That is beyond the scope of CSS, but it is quite simple to do with JQuery
这超出了 CSS 的范围，但使用 JQuery 很简单
$(document).ready(function() {/*You code here*/ }
Or read more about it here => http://api.jquery.com/ready/
或在此处阅读更多相关信息 => http://api.jquery.com/ready/
Place your animation code in a class, lets say .animation
将您的动画代码放在一个类中，比如说 .animation
Then call that class on the element you wish to animate using JQuery .addclass() (http://api.jquery.com/addClass/)
然后使用 JQuery .addclass() ( http://api.jquery.com/addClass/)在您希望设置动画的元素上调用该类
Something like this
像这样的东西
<script type="text/javascript">
$(document).ready(function() {
$("#element-to-animate").addClass("animation");
});
</script>
回答by user3916054
div
{
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
回答by Maxim Aleksandrovich
function atload() {dom_rdy()}window.onload=atload;
Paste it on the top of your js, and working with function dom_rdy()it will calls when dom is ready, without jQuery and others tons of code.
将它粘贴到 js 的顶部，并使用dom_rdy()它在 dom 准备就绪时调用的函数，而无需使用 jQuery 和其他大量代码。
回答by Rajkamal Subramanian
.bodyclass div{
some animation css code
}
After body load just apply bodyclassto the body tag, then all the divs in the page will be animatable. This solution is efficient then @Husar said, because, we need to search only for the body element after the page load is complete but in other case, we need to change all the elements class name that needs to animated.
在 body 加载只应用于bodyclassbody 标签之后，页面中的所有 div 都将是可动画的。这个解决方案是有效的然后@Husar 说，因为，我们只需要在页面加载完成后搜索 body 元素，但在其他情况下，我们需要更改所有需要动画的元素类名称。
回答by gitesh.tyagi
$(window).load(function(){...})
$(window).load(function(){...})
works fine!
工作正常！
But use only when you want images to get loaded.
但仅在您希望加载图像时使用。
回答by rash.tay
@Mavericks solution works. But a much simpler solution that worked for me was:
@Mavericks 解决方案有效。但对我有用的更简单的解决方案是：
CSS:
CSS：
body {
display: none;
}
JS:
JS：
(function() {
$('body').css('display', 'block');
})();
or you can use show/hide. But, animation became buggy on IE10 and IE11. So, I changed the code to specifically for these browsers to:
或者您可以使用显示/隐藏。但是，动画在 IE10 和 IE11 上变得有问题。因此，我将代码专门针对这些浏览器更改为：
CSS:
CSS：
body {
visibility: hidden;
}
JS:
JS：
(function() {
$('body').css('visibility', 'visible');
})();
I also found this: https://css-tricks.com/transitions-only-after-page-load/
我还发现了这个：https: //css-tricks.com/transitions-only-after-page-load/
Maybe it might help someone.
也许它可以帮助某人。
