blocks|key|262036|text|好吧，这是一个棘手的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|262037|答案是“不完全是”。|262038|CSS不是一个功能层。它不知道发生了什么，什么时候发生。它只是用来添加一个表示层到不同的“标志”(类，ids，状态)。|262039|默认情况下，CSS/DOM不提供任何类型的“加载”状态供CSS使用。如果你想/能够使用JavaScript，你可以分配一个类给body或其他东西来激活一些CSS。|offset|length|style|CODE|262040|也就是说，你可以为它创建一个hack。我将在这里举一个例子，但它可能适用于您的情况，也可能不适用。|262041|我们在假设"close“是”足够好“的基础上进行操作：|262042|<html>
<head>

</head>
<body>
++++
++++<div+class="onLoad">OMG,+I've+loaded+!</div>
</body>
</html>|code-block|syntax|javascript|262043|下面是我们的CSS样式表的摘录：|262044|.onLoad
{
++++-webkit-animation:bounceIn+2s;
}|262045|我们还假设现代浏览器是渐进式呈现的，所以最后一个元素将呈现在最后，所以这个CSS将最后被激活。|262046|entityMap^0|0|0|0|1R|4|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|15|8|@$H|16|I|17|J|K]]|9|@]|A|$]]|$1|L|3|M|5|6|7|18|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|19|8|@]|9|@]|A|$]]|$1|P|3|Q|5|R|7|1A|8|@]|9|@]|A|$S|T]]|$1|U|3|V|5|6|7|1B|8|@]|9|@]|A|$]]|$1|W|3|X|5|R|7|1C|8|@]|9|@]|A|$S|T]]|$1|Y|3|Z|5|6|7|1D|8|@]|9|@]|A|$]]|$1|10|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|11|$]]

Well, this is a tricky one.

The answer is "not really".

CSS isn't a functional layer. It doesn't have any awareness of what happens or when. It's used simply to add a presentational layer to different "flags" (classes, ids, states).

By default, CSS/DOM does not provide any kind of "on load" state for CSS to use. If you wanted/were able to use JavaScript, you'd allocate a class to <code>body</code> or something to activate some CSS.

That being said, you can create a hack for that. I'll give an example here, but it may or may not be applicable to your situation.

We're operating on the assumption that "close" is "good enough":

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;!-- Reference your CSS here... --&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;!-- A whole bunch of HTML here... --&gt;
 &lt;div class="onLoad"&gt;OMG, I've loaded !&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

Here's an excerpt of our CSS stylesheet:

<pre><code>.onLoad
{
 -webkit-animation:bounceIn 2s;
}
</code></pre>

We're also on the assumption that modern browsers render progressively, so our last element will render last, and so this CSS will be activated last.

blocks|key|262048|text|不是真的，因为CSS被尽快应用，但是元素可能还没有被绘制出来。你可能会猜到1到2秒的延迟，但对于大多数人来说，这看起来并不正确，这取决于他们的网速。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|262049|此外，如果你想淡入一些东西，例如，它将需要CSS来隐藏要交付的内容。如果用户没有CSS3转换，那么他们永远不会看到它。|262050|我推荐使用jQuery+(为了便于使用，您可能希望为其他UA添加动画)和一些类似如下的JS：|262051|$(document).ready(function()+{
++++$('#id_to_fade_in')
++++++++.css({"opacity":0})+++//+Set+to+0+as+soon+as+possible+–+may+result+in+flicker,+but+it's+not+hidden+for+users+with+no+JS+(Googlebot+for+instance!)
++++++++.delay(200)+++++++++++//+Wait+for+a+bit+so+the+user+notices+it+fade+in
++++++++.css({"opacity":1});++//+Fade+it+back+in.+Swap+css+for+animate+in+legacy+browsers+if+required.
});|code-block|syntax|javascript|262052|以及在CSS中添加的过渡。这样做的好处是，如果需要，可以很容易地在遗留浏览器中使用animate而不是第二个CSS。|262053|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|R|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Not really, as CSS is applied as soon as possible, but the elements might not be drawn yet. You could guess a delay of 1 or 2 seconds, but this won't look right for most people, depending on the speed of their internet.

In addition, if you want to fade something in for instance, it would require CSS that hides the content to be delivered. If the user doesn't have CSS3 transitions then they would never see it.

I'd recommend using jQuery (for ease of use + you may wish to add animation for other UAs) and some JS like this: 

<pre><code>$(document).ready(function() {
 $('#id_to_fade_in')
 .css({"opacity":0}) // Set to 0 as soon as possible – may result in flicker, but it's not hidden for users with no JS (Googlebot for instance!)
 .delay(200) // Wait for a bit so the user notices it fade in
 .css({"opacity":1}); // Fade it back in. Swap css for animate in legacy browsers if required.
});
</code></pre>

Along with the transitions added in the CSS. This has the advantage of easily allowing the use of animate instead of the second CSS in legacy browsers if required.

blocks|key|2949802|text|当鼠标在屏幕上第一次移动时，当鼠标第一次在屏幕上移动时，它会在到达后的一秒内启动，这里的问题是，当鼠标离开屏幕时，它会反转。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2949803|html:hover+#animateelementid,+body:hover+#animateelementid+{rotate+....}|code-block|syntax|javascript|2949804|这是我能想到的最好的事情：http://jsfiddle.net/faVLX/|offset|length|2949805|全屏：http://jsfiddle.net/faVLX/embedded/result/|2949806|编辑请参阅下面的评论：|style|BOLD|2949807|这在任何触摸屏设备上都不起作用，因为没有悬停，所以用户不会看到内容，除非他们点击它。--+Rich+Bradshaw|2949808|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/faVLX/|1|http://jsfiddle.net/faVLX/embedded/result/^0|0|0|D|Q|0|0|3|16|1|0|0|B|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|@$I|19|J|1A|1|1B]]|A|$]]|$1|M|3|N|5|6|7|1C|8|@$I|1D|J|1E|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1F|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]|10|$5|V|W|X|A|$Y|11]]]]

start it with hover of body than It will start when the mouse first moves on the screen, which is mostly within a second after arrival, the problem here is that it will reverse when out of the screen.

<pre><code>html:hover #animateelementid, body:hover #animateelementid {rotate ....}
</code></pre>

thats the best thing I can think of: <a href="http://jsfiddle.net/faVLX/" rel="nofollow noreferrer">http://jsfiddle.net/faVLX/</a>

fullscreen: <a href="http://jsfiddle.net/faVLX/embedded/result/" rel="nofollow noreferrer">http://jsfiddle.net/faVLX/embedded/result/</a>

Edit see comments below: 
This will not work on any touchscreen device because there is no hover, so the user won't see the content unless they tap it. – Rich Bradshaw

blocks|key|262059|text|好了，我已经成功地实现了仅使用css过渡加载页面时的动画(某种程度上！)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|262060|我已经创建了2个css样式表:第一个是我希望动画之前的html样式…第二个是我希望在动画执行后页面的外观。|262061|我不完全理解我是如何做到这一点的，但只有当两个css文件(都在我的文档头中)由一些javascript分隔时，它才能起作用，如下所示。|262062|我已经用火狐，safari和opera进行了测试。有时动画会起作用，有时它会直接跳到第二个css文件，有时页面看起来正在加载，但什么也没有显示(可能只有我？)|262063|<link+media="screen,projection"+type="text/css"+href="first-css-file.css"++rel="stylesheet"+/>

<script+language="javascript"+type="text/javascript"+src="../js/jQuery+JavaScript+Library+v1.3.2.js"></script>

<script+type='text/javascript'>
$(document).ready(function(){

//+iOS+Hover+Event+Class+Fix
if((navigator.userAgent.match(/iPhone/i))+%7C%7C+(navigator.userAgent.match(/iPod/i))+%7C%7C
(navigator.userAgent.match(/iPad/i)))+{
$(".container+.menu-text").click(function(){++//+Update+class+to+point+at+the+head+of+the+list
});
}
});
</script>

<link+media="screen,projection"+type="text/css"+href="second-css-file.css"++rel="stylesheet"+/>|code-block|syntax|javascript|262064|这是我正在进行的工作网站的链接：http://www.hankins-design.co.uk/beta2/test/index.html|offset|length|262065|也许我错了，但我认为不支持css转换的浏览器应该不会有任何问题，因为它们应该直接跳到第二个css文件，没有延迟或持续时间。|262066|我有兴趣知道如何搜索引擎友好的这种方法的看法。戴上我的黑帽，我想我可以用关键字填充一个页面，并对其不透明度应用9999s的延迟。|262067|我很想知道搜索引擎如何处理转换延迟属性，以及使用上面的方法，它们是否会看到页面上的链接和信息。|262068|更重要的是，我真的想知道为什么每次页面加载都不一致，以及我如何纠正这一点！|262069|如果没有别的，我希望这能产生一些观点和意见！|262070|entityMap|0|LINK|mutability|MUTABLE|url|http://www.hankins-design.co.uk/beta2/test/index.html^0|0|0|0|0|0|G|1H|0|0|0|0|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|6|7|1A|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|1B|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|1C|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1D|8|@]|9|@$O|1E|P|1F|1|1G]]|A|$]]|$1|Q|3|R|5|6|7|1H|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1I|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1J|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1K|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1L|8|@]|9|@]|A|$]]|$1|10|3|-4|5|6|7|1M|8|@]|9|@]|A|$]]]|11|$12|$5|13|14|15|A|$16|17]]]]

Ok I have managed to achieve an animation when the page loads using only css transitions (sort of!):

I have created 2 css style sheets:
the first is how I want the html styled before the animation... 
and the second is how I want the page to look after the animation has been carried out.

I don't fully understand how I have accomplished this but it only works when the two css files (both in the head of my document) are separated by some javascript as follows.

I have tested this with Firefox, safari and opera. Sometimes the animation works, sometimes it skips straight to the second css file and sometimes the page appears to be loading but nothing is displayed (perhaps it is just me?)

<pre><code>&lt;link media="screen,projection" type="text/css" href="first-css-file.css" rel="stylesheet" /&gt;

&lt;script language="javascript" type="text/javascript" src="../js/jQuery JavaScript Library v1.3.2.js"&gt;&lt;/script&gt;

&lt;script type='text/javascript'&gt;
$(document).ready(function(){

// iOS Hover Event Class Fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) ||
(navigator.userAgent.match(/iPad/i))) {
$(".container .menu-text").click(function(){ // Update class to point at the head of the list
});
}
});
&lt;/script&gt;

&lt;link media="screen,projection" type="text/css" href="second-css-file.css" rel="stylesheet" /&gt;
</code></pre>

Here is a link to my work-in-progress website: <a href="http://www.hankins-design.co.uk/beta2/test/index.html" rel="nofollow">http://www.hankins-design.co.uk/beta2/test/index.html</a>

Maybe I'm wrong but I thought browsers that do not support css transitions should not have any issues as they should skip straight to the second css file without delay or duration.

I am interested to know views on how search engine friendly this method is. With my black hat on I suppose I could fill a page with keywords and apply a 9999s delay on its opacity. 

I would be interested to know how search engines deal with the transition-delay attribute and whether, using the method above, they would even see the links and information on the page.

More importantly I would really like to know why this is not consistent each time the page loads and how I can rectify this!

I hope this can generate some views and opinions if nothing else!

blocks|key|3163696|text|您可以在页面加载时运行CSS关键帧动画，而无需使用任何JavaScript；您只需使用CSS3+JavaScript即可。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|3163697|让我们来看一个例子。|3163698|以下是仅使用CSS3滑入适当位置的导航菜单的演示：|3163699|​|3163700|@keyframes+slideInFromLeft+{
++0%25+{
++++transform:+translateX(-100%25);
++}
++100%25+{
++++transform:+translateX(0);
++}
}

header+{++
++/*+This+section+calls+the+slideInFromLeft+animation+we+defined+above+*/
++animation:+1s+ease-out+0s+1+slideInFromLeft;
++
++background:+#333;
++padding:+30px;
}

/*+Added+for+aesthetics+*/+body+{margin:+0;font-family:+"Segoe+UI",+Arial,+Helvetica,+Sans+Serif;}+a+{text-decoration:+none;+display:+inline-block;+margin-right:+10px;+color:#fff;}|code-block|syntax|javascript|3163701|<header>
++<a+href="#">Home</a>
++<a+href="#">About</a>
++<a+href="#">Products</a>
++<a+href="#">Contact</a>
</header>|3163702|3163703|把它拆开。|3163704|这里重要的部分是关键帧动画，我们称之为slideInFromLeft...|CODE|3163705|@keyframes+slideInFromLeft+{
++++0%25+{
++++++++transform:+translateX(-100%25);
++++}
++++100%25+{
++++++++transform:+translateX(0);
++++}
}|3163706|...which基本上是这样说的：“在开始时，标题将以全宽离开屏幕的左侧边缘，而在结束时将处于适当位置”。|3163707|第二部分是调用slideInFromLeft动画：|3163708|animation:+1s+ease-out+0s+1+slideInFromLeft;|3163709|上面是速记版本，但为了清楚起见，这里是详细版本：|3163710|animation-duration:+1s;+/*+the+duration+of+the+animation+*/
animation-timing-function:+ease-out;+/*+how+the+animation+will+behave+*/
animation-delay:+0s;+/*+how+long+to+delay+the+animation+from+starting+*/
animation-iteration-count:+1;+/*+how+many+times+the+animation+will+play+*/
animation-name:+slideInFromLeft;+/*+the+name+of+the+animation+we+defined+above+*/|3163711|你可以做各种各样有趣的事情，比如在内容中滑动，或者引起人们对区域的注意。|3163712|Here's+what+W3C+has+to+say.|3163713|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/css3-animations/#keyframes^0|B|1E|0|0|A|0|0|P|0|0|1|0|0|0|0|1|0|0|5|0|0|11|J|F|0|0|0|1H|0|0|P|7|F|0|0|0|O|0|0|0|10|0|0|R|0|R|0|0^^$0|@$1|2|3|4|5|6|7|1M|8|@$9|1N|A|1O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1P|8|@$9|1Q|A|1R|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1S|8|@$9|1T|A|1U|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|1V|8|@$9|1W|A|1X|B|C]]|D|@]|E|$]]|$1|L|3|M|5|N|7|1Y|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|N|7|1Z|8|@]|D|@]|E|$O|P]]|$1|S|3|K|5|6|7|20|8|@$9|21|A|22|B|C]]|D|@]|E|$]]|$1|T|3|U|5|6|7|23|8|@$9|24|A|25|B|C]]|D|@]|E|$]]|$1|V|3|W|5|6|7|26|8|@$9|27|A|28|B|C]|$9|29|A|2A|B|X]]|D|@]|E|$]]|$1|Y|3|Z|5|N|7|2B|8|@]|D|@]|E|$O|P]]|$1|10|3|11|5|6|7|2C|8|@$9|2D|A|2E|B|C]]|D|@]|E|$]]|$1|12|3|13|5|6|7|2F|8|@$9|2G|A|2H|B|C]|$9|2I|A|2J|B|X]]|D|@]|E|$]]|$1|14|3|15|5|N|7|2K|8|@]|D|@]|E|$O|P]]|$1|16|3|17|5|6|7|2L|8|@$9|2M|A|2N|B|C]]|D|@]|E|$]]|$1|18|3|19|5|N|7|2O|8|@]|D|@]|E|$O|P]]|$1|1A|3|1B|5|6|7|2P|8|@$9|2Q|A|2R|B|C]]|D|@]|E|$]]|$1|1C|3|1D|5|6|7|2S|8|@$9|2T|A|2U|B|C]]|D|@$9|2V|A|2W|1|2X]]|E|$]]|$1|1E|3|-4|5|6|7|2Y|8|@]|D|@]|E|$]]]|1F|$1G|$5|1H|1I|1J|E|$1K|1L]]]]

You can run a CSS animation on page load without using any JavaScript; you just have to use CSS3 Keyframes.
<h1>Let's Look at an Example...</h1>
Here's a demonstration of a navigation menu sliding into place using CSS3 only:
<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>@keyframes slideInFromLeft {
 0% {
 transform: translateX(-100%);
 }
 100% {
 transform: translateX(0);
 }
}

header { 
 /* This section calls the slideInFromLeft animation we defined above */
 animation: 1s ease-out 0s 1 slideInFromLeft;
 
 background: #333;
 padding: 30px;
}

/* Added for aesthetics */ body {margin: 0;font-family: "Segoe UI", Arial, Helvetica, Sans Serif;} a {text-decoration: none; display: inline-block; margin-right: 10px; color:#fff;}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
 &lt;a href="#"&gt;Home&lt;/a&gt;
 &lt;a href="#"&gt;About&lt;/a&gt;
 &lt;a href="#"&gt;Products&lt;/a&gt;
 &lt;a href="#"&gt;Contact&lt;/a&gt;
&lt;/header&gt;</code></pre>
</div>
</div>

<h1>Break it down...</h1>
The important parts here are the keyframe animation which we call <code>slideInFromLeft</code>...
<pre><code>@keyframes slideInFromLeft {
 0% {
 transform: translateX(-100%);
 }
 100% {
 transform: translateX(0);
 }
}
</code></pre>
...which basically says &quot;at the start, the header will be off the left hand edge of the screen by its full width and at the end will be in place&quot;.
The second part is calling that <code>slideInFromLeft</code> animation:
<pre><code>animation: 1s ease-out 0s 1 slideInFromLeft;
</code></pre>
Above is the shorthand version but here is the verbose version for clarity:
<pre><code>animation-duration: 1s; /* the duration of the animation */
animation-timing-function: ease-out; /* how the animation will behave */
animation-delay: 0s; /* how long to delay the animation from starting */
animation-iteration-count: 1; /* how many times the animation will play */
animation-name: slideInFromLeft; /* the name of the animation we defined above */
</code></pre>
You can do all sorts of interesting things, like sliding in content, or drawing attention to areas.
<a href="http://www.w3.org/TR/css3-animations/#keyframes" rel="noreferrer">Here's what W3C has to say.</a>

blocks|key|260230|text|只需要很少的Javascript：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|260231|window.onload+=+function()+{
++++document.body.className+%2B=+"+loaded";
}|code-block|syntax|javascript|260232|现在是CSS：|260233|.fadein+{
++++opacity:+0;
++++-moz-transition:+opacity+1.5s;
++++-webkit-transition:+opacity+1.5s;
++++-o-transition:+opacity+1.5s;
++++transition:+opacity+1.5s;
}

body.loaded+.fadein+{
++++opacity:+1;
}|260234|我知道问题说的是“没有Javascript"，但我认为值得指出的是，有一个简单的解决方案涉及一行Javascript。|260235|它甚至可以是内联Javascript，就像这样：|260236|<body+onload="document.body.className+%2B=+'+loaded';"+class="fadein">|260237|这就是所需的所有JavaScript。|260238|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

Very little Javascript is necessary:

<pre class="lang-js prettyprint-override"><code>window.onload = function() {
 document.body.className += " loaded";
}
</code></pre>

Now the CSS:

<pre class="lang-css prettyprint-override"><code>.fadein {
 opacity: 0;
 -moz-transition: opacity 1.5s;
 -webkit-transition: opacity 1.5s;
 -o-transition: opacity 1.5s;
 transition: opacity 1.5s;
}

body.loaded .fadein {
 opacity: 1;
}
</code></pre>

I know the question said "without Javascript", but I think it's worth pointing out that there is an easy solution involving one line of Javascript.

It could even be inline Javascript, something like that:

<pre class="lang-html prettyprint-override"><code>&lt;body onload="document.body.className += ' loaded';" class="fadein"&gt;
</code></pre>

That's all the JavaScript that's needed.

blocks|key|2949897|text|类似于@Rolf的解决方案，但跳过对外部函数的引用或使用类。如果加载后不透明度保持固定为1，只需使用内联脚本通过样式直接更改不透明度。例如|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2949898|<body+class="fadein"+onload="this.style.opacity=1">|code-block|syntax|javascript|2949899|其中CSS+sytle+"fadein“是根据@Rolf定义的，定义转换并将不透明度设置为初始状态(即0)|2949900|唯一需要注意的是，这不适用于SPAN或DIV元素，因为它们没有工作的onload事件|2949901|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Similar to @Rolf's solution, but skip reference to external functions or playing with class. If opacity is to remain fixed to 1 once loaded, simply use inline script to directly change opacity via style. For example

<pre><code>&lt;body class="fadein" onload="this.style.opacity=1"&gt;
</code></pre>

where CSS sytle "fadein" is defined per @Rolf,defining transition and setting opacity to initial state (i.e. 0)

the only catch is that this does not work with SPAN or DIV elements, since they do not have working onload event

blocks|key|2949927|text|我想我已经找到了一种解决OP问题的方法--而不是以页面的“on.load”开头的过渡--我发现使用动画来淡入不透明效果是一样的，(我正在寻找与OP相同的东西)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2949928|所以我想让正文文本在页面加载时从白色(和网站背景一样)淡入到黑色文本颜色--我从周一才开始编码，所以我一直在寻找一个'on.load‘风格的东西代码，但我还不知道JS+--所以这是我的代码，对我来说效果很好。|2949929|#main+p+{
++animation:+fadein+2s;
}
@keyframes+fadein+{
++from+{+opacity:+0}
++to+++{+opacity:+1}
}|code-block|syntax|javascript|2949930|无论出于什么原因，这并不适用于.class，只适用于#id(至少在我的平台上不适用)。|offset|length|style|CODE|2949931|希望这对我有帮助--因为我知道这个网站对我帮助很大！|2949932|entityMap^0|0|0|0|F|6|Q|3|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@$K|W|L|X|M|N]|$K|Y|L|Z|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|R|$]]

I think I have found a sort of work around for the OP question - instead of a transition beginning 'on.load' of the page - I found that using an animation for an opacity fade in had the same effect, (I was looking for the same thing as OP). 

So I wanted to have the body text fade in from white(same as site background) to black text colour on page load - and I've only been coding since Monday so I was looking for an 'on.load' style thing code, but don't know JS yet - so here is my code that worked well for me. 

<pre><code>#main p {
 animation: fadein 2s;
}
@keyframes fadein {
 from { opacity: 0}
 to { opacity: 1}
}
</code></pre>

And for whatever reason, this doesn't work for <code>.class</code> only <code>#id</code>'s(at least not on mine)

Hope this helps - as I know this site helps me a lot!

blocks|key|260269|text|如果其他人在同时执行两个转换时遇到问题，我就这么做了。我需要在页面加载时从上到下显示文本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|260270|HTML|260271|<body+class="existing-class-name"+onload="document.body.classList.add('loaded')">|code-block|syntax|javascript|260272|260273|<div+class="image-wrapper">
++++<img+src="db-image.jpg"+alt="db-image-name">
++++<span+class="text-over-image">DB+text
</div>|260274|CSS|260275|.text-over-image+{
++++position:+absolute;
++++background-color:+rgba(110,+186,+115,+0.8);
++++color:+#eee;
++++left:+0;
++++width:+100%25;
++++padding:+10px;
++++opacity:+0;
++++bottom:+100%25;
++++-webkit-transition:+opacity+2s,+bottom+2s;
++++-moz-transition:+opacity+2s,+bottom+2s;
++++-o-transition:+opacity+2s,+bottom+2s;
++++transition:+opacity+2s,+bottom+2s;
}

body.loaded+.text-over-image+{
++++bottom:+0;
++++opacity:+1;
}|260276|我不知道为什么我一直试图在一个选择器中使用两个转换声明，并且(不是真的)认为它会同时使用这两个声明。|260277|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|V|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|J|3|K|5|F|7|X|8|@]|9|@]|A|$G|H]]|$1|L|3|M|5|6|7|Y|8|@]|9|@]|A|$]]|$1|N|3|O|5|F|7|Z|8|@]|9|@]|A|$G|H]]|$1|P|3|Q|5|6|7|10|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|S|$]]

If anyone else had problems doing two transitions at once, here's what I did. I needed text to come from top to bottom on page load.

HTML


<pre><code>&lt;body class="existing-class-name" onload="document.body.classList.add('loaded')"&gt;
</code></pre>

HTML


<pre><code>&lt;div class="image-wrapper"&gt;
 &lt;img src="db-image.jpg" alt="db-image-name"&gt;
 &lt;span class="text-over-image"&gt;DB text&lt;/span&gt;
&lt;/div&gt;
</code></pre>

CSS


<pre><code>.text-over-image {
 position: absolute;
 background-color: rgba(110, 186, 115, 0.8);
 color: #eee;
 left: 0;
 width: 100%;
 padding: 10px;
 opacity: 0;
 bottom: 100%;
 -webkit-transition: opacity 2s, bottom 2s;
 -moz-transition: opacity 2s, bottom 2s;
 -o-transition: opacity 2s, bottom 2s;
 transition: opacity 2s, bottom 2s;
}

body.loaded .text-over-image {
 bottom: 0;
 opacity: 1;
}
</code></pre>

Don't know why I kept trying to use 2 transition declarations in 1 selector and (not really) thinking it would use both.

blocks|key|262119|text|仅延迟3s的CSS|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|262120|这里有几点需要注意：|262121|262122|在一个调用|unordered-list-item|262123|中创建多个动画我们创建了一个wait动画，它只会延迟实际的动画(在我们的例子中是第二个)。|262124|262125|代码：|262126|header+{
++++animation:+3s+ease-out+0s+1+wait,+0.21s+ease-out+3s+1+slideInFromBottom;
}

@keyframes+wait+{
++++from+{+transform:+translateY(20px);+}
++++to+{+transform:+translateY(20px);+}
}

@keyframes+slideInFromBottom+{
++from+{+transform:+translateY(20px);+opacity:+0;+}
++to+{+transform:+translateY(0);+opacity:+1;+}
}|code-block|syntax|javascript|262127|entityMap^0|6|3|0|0|A|0|0|0|5|0|0|19|0|0|0|3|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|13|8|@]|D|@]|E|$]]|$1|I|3|J|5|K|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|L|3|M|5|K|7|17|8|@$9|18|A|19|B|C]]|D|@]|E|$]]|$1|N|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|S|7|1E|8|@]|D|@]|E|$T|U]]|$1|V|3|-4|5|6|7|1F|8|@]|D|@]|E|$]]]|W|$]]

CSS only with a delay of 3s

a few points to take here:

<ul>
<li>multiple animations in one call</li>
<li>we create a wait animation that just delays the actual one (the second one in our case).</li>
</ul>

Code:

<pre><code>header {
 animation: 3s ease-out 0s 1 wait, 0.21s ease-out 3s 1 slideInFromBottom;
}

@keyframes wait {
 from { transform: translateY(20px); }
 to { transform: translateY(20px); }
}

@keyframes slideInFromBottom {
 from { transform: translateY(20px); opacity: 0; }
 to { transform: translateY(0); opacity: 1; }
}
</code></pre>

blocks|key|260292|text|更简单的解决方案(仍然只有一行内联javascript)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|260293|将其用作主体标记:请注意，body.或this.对我不起作用。只有长的；querySelector允许使用classList.remove+(Linux+Chromium)|offset|length|style|CODE|260294|<body+class="onload"+onload="document.querySelector('body').classList.remove('onload')">|code-block|syntax|javascript|260295|并将此行添加到其他css规则的顶部。|260296|body.onload+*{+transform:+none+!important;+}|260297|请注意，这可以应用于不透明(如OP其他海报所要求的)，只需使用不透明作为转换触发器。(甚至可以在任何其他css规则上以相同的方式工作，您可以使用多个类来明确触发之间的延迟)|260298|逻辑是一样的。不强制转换(在body.onload的所有子元素上使用:none+!important，一旦加载了文档，就删除该类以触发在您的css中指定的所有元素上的所有转换。|260299|下面的第一个答案(请参阅上面的编辑以获得更简短的答案)|BOLD|260300|以下是一个相反的解决方案：|260301|260302|创建html布局并根据最终结果设置css+(使用您想要的所有转换)。|ordered-list-item|260303|根据您的喜好设置转换属性|260304|向加载后要转换的元素添加一个类(例如:+waitload)。CSS关键字!important是这里的关键字。|260305|加载文档后，使用JS从元素中删除类以开始转换(并删除转换:+none覆盖)。|260306|260307|适用于多个元素上的多个过渡。没有尝试跨浏览器兼容性。|260308|#rotated{
++++transform+:+rotate(90deg)+/*+any+other+transformation+*/;
++++transition++3s;
}
#translated{
++++transform+:+translate(90px)+/*+any+other+transformation+*/;
++++transition++3s;
}
.waitload{
++++transform:+none+!important;
}|260309|<div+id='rotated'+class='waitload'>
++++rotate+after+load
</div>
<div+id='translated'+class='waitload'>
++++trasnlate+after+load
</div>
<script+type="text/javascript">
+++++//+or+body+onload+?
++++[...document.querySelectorAll('.waitload')]
++++++++.map(e+=>+e.classList.remove('waitload'));

</script>|260310|entityMap^0|0|D|5|J|5|10|D|1H|G|0|0|0|0|0|E|B|Y|G|0|0|R|0|0|0|0|0|10|A|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1I|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1J|8|@$D|1K|E|1L|F|G]|$D|1M|E|1N|F|G]|$D|1O|E|1P|F|G]|$D|1Q|E|1R|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|1S|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1T|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|1U|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|1V|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1W|8|@$D|1X|E|1Y|F|G]|$D|1Z|E|20|F|G]]|9|@]|A|$]]|$1|U|3|V|5|6|7|21|8|@$D|22|E|23|F|W]]|9|@]|A|$]]|$1|X|3|Y|5|6|7|24|8|@]|9|@]|A|$]]|$1|Z|3|-4|5|6|7|25|8|@]|9|@]|A|$]]|$1|10|3|11|5|12|7|26|8|@]|9|@]|A|$]]|$1|13|3|14|5|12|7|27|8|@]|9|@]|A|$]]|$1|15|3|16|5|12|7|28|8|@$D|29|E|2A|F|W]]|9|@]|A|$]]|$1|17|3|18|5|12|7|2B|8|@]|9|@]|A|$]]|$1|19|3|-4|5|6|7|2C|8|@]|9|@]|A|$]]|$1|1A|3|1B|5|6|7|2D|8|@]|9|@]|A|$]]|$1|1C|3|1D|5|J|7|2E|8|@]|9|@]|A|$K|L]]|$1|1E|3|1F|5|J|7|2F|8|@]|9|@]|A|$K|L]]|$1|1G|3|-4|5|6|7|2G|8|@]|9|@]|A|$]]]|1H|$]]

Even simplier solution (still with [one line inline] javascript):

Use this as the body tag:
Note that <code>body.</code> or <code>this.</code> did not work for me. Only the long ; <code>querySelector</code> allow the use of <code>classList.remove</code> (Linux Chromium)

<pre><code>&lt;body class="onload" onload="document.querySelector('body').classList.remove('onload')"&gt;
</code></pre>

and add this line on top of your other css rules.

<pre><code>body.onload *{ transform: none !important; }
</code></pre>

Take note that this can apply to opacity (as requested by OP [other posters] ) simply by using opacity as a transition trigger instead. (might even work on any other css ruling in the same fashion and you can use multiple class for explicity delay between triggering)

The logic is the same. Enforce no transform (with <code>:none !important</code>on all child element of <code>body.onload</code>and once the document is loaded remove the class to trigger all transition on all elements as specified in your css. 

FIRST ANSWER BELOW (SEE EDIT ABOVE FOR SHORTER ANSWER)

Here is a reverse solution:

<ol>
<li>Make your html layout and set the css accordingly to your final result (with all the transformation you want).</li>
<li>Set the transition property to your liking</li>
<li>add a class (eg: waitload) to the elements you want to transform AFTER load. The CSS keyword !important is the key word here.</li>
<li>Once the document is loaded, use JS to remove the class from the elements to to start transformation (and remove the transition: none override).</li>
</ol>

Works with multiple transition on multiple elements. Did not try cross-browser compatibility.

<pre><code>#rotated{
 transform : rotate(90deg) /* any other transformation */;
 transition 3s;
}
#translated{
 transform : translate(90px) /* any other transformation */;
 transition 3s;
}
.waitload{
 transform: none !important;
}
</code></pre>

<pre><code>&lt;div id='rotated' class='waitload'&gt;
 rotate after load
&lt;/div&gt;
&lt;div id='translated' class='waitload'&gt;
 trasnlate after load
&lt;/div&gt;
&lt;script type="text/javascript"&gt;
 // or body onload ?
 [...document.querySelectorAll('.waitload')]
 .map(e =&gt; e.classList.remove('waitload'));

&lt;/script&gt;
</code></pre>

blocks|key|263510|text|你也可以使用定制的css类(className)来代替css标签。不需要外部包。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|263511|import+React,+{+useState,+useEffect+}+from+'react';
import+{+css+}+from+'@emotion/css'

const+Hello+=+(props)+=>+{
++++const+[loaded,+setLoaded]+=+useState(false);

++++useEffect(()+=>+{
++++++++//+For+load
++++++++setTimeout(function+()+{
++++++++++++setLoaded(true);
++++++++},+50);+//+Browser+needs+some+time+to+change+to+unload+state/style

++++++++//+For+unload
++++++++return+()+=>+{
++++++++++++setLoaded(false);
++++++++};
++++},+[props.someTrigger]);+//+Set+your+trigger

++++return+(
++++++++<div
++++++++++++css={[
++++++++++++++++css`
++++++++++++++++++++opacity:+0;
++++++++++++++++++++transition:+opacity+0s;
++++++++++++++++`,
++++++++++++++++loaded+&&
++++++++++++++++++++css`
++++++++++++++++++++++++transition:+opacity+2s;
++++++++++++++++++++++++opacity:+1;
++++++++++++++++++++`,
++++++++++++]}
++++++++>
++++++++++++hello
++++++++</div>
++++);
};|code-block|syntax|javascript|263512|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You could use custom css classes (className) instead of the css tag too.
No need for an external package.
<pre><code>import React, { useState, useEffect } from 'react';
import { css } from '@emotion/css'

const Hello = (props) =&gt; {
 const [loaded, setLoaded] = useState(false);

 useEffect(() =&gt; {
 // For load
 setTimeout(function () {
 setLoaded(true);
 }, 50); // Browser needs some time to change to unload state/style

 // For unload
 return () =&gt; {
 setLoaded(false);
 };
 }, [props.someTrigger]); // Set your trigger

 return (
 &lt;div
 css={[
 css`
 opacity: 0;
 transition: opacity 0s;
 `,
 loaded &amp;&amp;
 css`
 transition: opacity 2s;
 opacity: 1;
 `,
 ]}
 &gt;
 hello
 &lt;/div&gt;
 );
};
</code></pre>

blocks|key|2950020|text|将其添加到您的css以淡入动画|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2950021|body{animation:+2s+ease-out+0s+1+FadeIn;}
@keyframes+FadeIn+{
++++0%25+{
++++++opacity:0;
++++}
++++100%25+{
++++++opacity:1;
++++}
}|code-block|syntax|javascript|2950022|如果希望加载速度较慢，请增加缓出时间|2950023|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

add this to your css for fade in animation
<pre><code>body{animation: 2s ease-out 0s 1 FadeIn;}
@keyframes FadeIn {
 0% {
 opacity:0;
 }
 100% {
 opacity:1;
 }
}
</code></pre>
increase the ease-out time if you want it to load slower

Is it possible to use CSS3 transition animation on page load without using Javascript?

This is kind of what I want, but on page load:

<a href="http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html" rel="noreferrer">http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html</a>

What I found so far

<ul>
<li><a href="http://trentwalton.com/2010/03/30/css3-transition-delay/" rel="noreferrer">CSS3 transition-delay</a>, a way to delay effects on elements. Only works on hover.</li>
<li><a href="http://www.leemunroe.com/animation/animation3.html" rel="noreferrer">CSS3 Keyframe</a>, works on load but are extremly slow. Not useful because of that.</li>
<li><a href="http://www.nealgrosskopf.com/tech/resources/45/" rel="noreferrer">CSS3 transition</a> is fast enough but don't animate on page load.</li>
</ul>

css3 transition animation on load?

jQuery

Linux

有没有可能在不使用Javascript的情况下在页面加载时使用CSS3过渡动画？这是我想要的，但是在页面加载时：到目前为止我所发现的，提供了一种延迟元素效果的方法。只在hover.，上工作，在加载时工作，但速度极慢。没有用，因为that.足够快，但在页面加载时不会有动画效果。

问加载时的css3过渡动画？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问加载时的css3过渡动画？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问加载时的css3过渡动画？
EN