blocks|key|401080|text|这超出了CSS的范围，但是用JQuery可以非常简单地完成。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|401081|$(document).ready(function()+{/*You+code+here*/+}|code-block|syntax|javascript|401082|或在此处阅读更多信息=>+http://api.jquery.com/ready/|offset|length|401083|将你的动画代码放在一个类中，比如说.animation|401084|然后使用JQuery+.addclass()+(http://api.jquery.com/addClass/)对要设置动画效果的元素调用该类|401085|像这样的东西|401086|+++<script+type="text/javascript">
++++$(document).ready(function()+{
++++$("#element-to-animate").addClass("animation");+
++++});
+++</script>|401087|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/ready/|1|http://api.jquery.com/addClass/^0|0|0|D|S|0|0|0|O|V|1|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|14|8|@]|9|@$I|15|J|16|1|17]]|A|$]]|$1|K|3|L|5|6|7|18|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|19|8|@]|9|@$I|1A|J|1B|1|1C]]|A|$]]|$1|O|3|P|5|6|7|1D|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|1E|8|@]|9|@]|A|$E|F]]|$1|S|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]|10|$5|V|W|X|A|$Y|11]]]]

That is beyond the scope of CSS, but it is quite simple to do with JQuery 

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

Or read more about it here => <a href="http://api.jquery.com/ready/">http://api.jquery.com/ready/</a>

Place your animation code in a class, lets say .animation 

Then call that class on the element you wish to animate using JQuery .addclass() (<a href="http://api.jquery.com/addClass/">http://api.jquery.com/addClass/</a>)

Something like this 

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

blocks|key|2368002|text|+++div
++++{
++++-webkit-animation-delay:+5s;+
+++++animation-delay:+5s;
++++}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2368003|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code> div
 {
 -webkit-animation-delay: 5s; 
 animation-delay: 5s;
 }
</code></pre>

blocks|key|4094797|text|function+atload()+{dom_rdy()}window.onload=atload;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4094798|将其粘贴到您的js的顶部，并与函数dom_rdy()一起工作，它将在dom准备就绪时调用，而无需jQuery和其他大量代码。|unstyled|offset|length|style|CODE|4094799|entityMap^0|0|H|9|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@$G|O|H|P|I|J]]|9|@]|A|$]]|$1|K|3|-4|5|F|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<pre><code>function atload() {dom_rdy()}window.onload=atload;
</code></pre>

Paste it on the top of your js, and working with function <code>dom_rdy()</code> it will calls when dom is ready, without jQuery and others tons of code.

blocks|key|401216|text|.bodyclass+div{
++++some+animation+css+code
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|401217|在body加载之后，只需将bodyclass应用于body标记，那么页面中的所有div都将是可动画的。@Husar说，这个解决方案是有效的，因为我们只需要在页面加载完成后搜索body元素，但在其他情况下，我们需要更改所有需要动画的元素类名。|unstyled|offset|length|style|CODE|401218|entityMap^0|0|D|9|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@$G|O|H|P|I|J]]|9|@]|A|$]]|$1|K|3|-4|5|F|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<pre><code>.bodyclass div{
 some animation css code
}
</code></pre>

After body load just apply <code>bodyclass</code> to 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.

blocks|key|2367997|text|$(window).load(function(){...})|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2367998|工作正常！|2367999|但仅当您希望加载图像时才使用。|2368000|entityMap^0|0|V|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|P|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|K|$]]

<code>$(window).load(function(){...})</code>

works fine!

But use only when you want images to get loaded.

blocks|key|4094912|text|@Mavericks解决方案有效。但对我有效的一个更简单的解决方案是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4094913|CSS：|4094914|body+{
+++display:+none;
}|code-block|syntax|javascript|4094915|JS：|4094916|(function()+{
++++$('body').css('display',+'block');
})();|4094917|或者，您可以使用显示/隐藏。但是，动画在IE10和IE11上出现了错误。因此，我将代码更改为专门针对这些浏览器：|4094918|4094919|body+{
+++visibility:+hidden;
}|4094920|4094921|(function()+{
++++$('body').css('visibility',+'visible');
})();|4094922|我还发现了这个：https://css-tricks.com/transitions-only-after-page-load/|offset|length|4094923|也许这能帮到什么人。|4094924|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/transitions-only-after-page-load/^0|0|0|0|0|0|0|0|0|0|0|8|1K|0|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|19|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1A|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|1B|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|1C|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|1D|8|@]|9|@]|A|$]]|$1|O|3|C|5|6|7|1E|8|@]|9|@]|A|$]]|$1|P|3|Q|5|F|7|1F|8|@]|9|@]|A|$G|H]]|$1|R|3|J|5|6|7|1G|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|1H|8|@]|9|@]|A|$G|H]]|$1|U|3|V|5|6|7|1I|8|@]|9|@$W|1J|X|1K|1|1L]]|A|$]]|$1|Y|3|Z|5|6|7|1M|8|@]|9|@]|A|$]]|$1|10|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]]|11|$12|$5|13|14|15|A|$16|17]]]]

@Mavericks solution works. But a much simpler solution that worked for me was:

CSS:

<pre><code>body {
 display: none;
}
</code></pre>

JS:

<pre><code>(function() {
 $('body').css('display', 'block');
})();
</code></pre>

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:

CSS:

<pre><code>body {
 visibility: hidden;
}
</code></pre>

JS:

<pre><code>(function() {
 $('body').css('visibility', 'visible');
})();
</code></pre>

I also found this: <a href="https://css-tricks.com/transitions-only-after-page-load/" rel="nofollow">https://css-tricks.com/transitions-only-after-page-load/</a>

Maybe it might help someone.

Anyone know how to start a css3 animation after the rest of the page loads completely (images and everything)?

I am using a delay right now to mimic it but this is not what I'm looking for.

Thanks

Peter

start css3 animation after entire page load

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

有人知道如何在页面的其余部分完全加载(图像和所有内容)后启动css3动画吗？我现在正在使用延迟来模仿它，但这不是我要找的。谢谢彼得

问在整个页面加载后启动css3动画
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在整个页面加载后启动css3动画EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在整个页面加载后启动css3动画
EN