小开

这是一个棘手的问题。

答案是“不太可能”。

CSS不是一个功能层。它不知道发生了什么，什么时候发生。它只是用于将表象的层添加到不同的“标志”(类、id、状态)。

默认情况下，CSS/DOM不提供任何类型的“on load”状态供CSS使用。如果你想要/能够使用JavaScript，你可以分配一个类给body或其他东西来激活一些CSS。

话虽如此，你可以为此创建一个黑客。我在这里举个例子，但它可能适用于你的情况，也可能不适用。

我们假设“接近”就是“足够好”:

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

下面是我们的CSS样式表的摘录:

.onLoad
{
-webkit-animation:bounceIn 2s;
}

我们还假设现代浏览器是渐进呈现的，所以我们的最后一个元素是最后呈现的，所以这个CSS是最后激活的。

小开

不一定，因为CSS是尽快应用的，但元素可能还没有绘制。你可以猜测延迟1或2秒，但这对大多数人来说并不合适，这取决于他们的互联网速度。

此外，如果你想淡入一些东西，例如，它将需要CSS隐藏要交付的内容。如果用户没有CSS3转换，那么他们将永远不会看到它。

我推荐使用jQuery(为了方便使用+你可能希望为其他无人机添加动画)和一些像这样的JS:

$(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.
});

随着在CSS中添加的过渡。这样做的好处是，如果需要的话，可以很容易地允许在传统浏览器中使用animate而不是第二个CSS。

小开

它将在鼠标第一次在屏幕上移动时开始，这主要是在到达后的一秒钟内，这里的问题是它将在离开屏幕时反转。

html:hover #animateelementid, body:hover #animateelementid {rotate ....}

这是我能想到的最好的东西:http://jsfiddle.net/faVLX/

全屏:http://jsfiddle.net/faVLX/embedded/result/

编辑见下面的评论: 这在任何触屏设备上都行不通，因为没有悬停，所以用户只有点击才会看到内容。- Rich Bradshaw

小开

好吧，我已经成功地实现了一个动画，当页面加载仅使用css过渡(sort of!):

我已经创建了2 css样式表: 第一个是我想要在动画之前的html样式… 第二个是我想要的页面在动画完成后的样子

我不完全明白我是如何做到这一点，但它只在两个css文件(在我的文档的头部)被一些javascript分开如下。

我已经在Firefox、safari和opera上进行了测试。有时动画工作，有时它直接跳到第二个css文件，有时页面似乎正在加载，但什么也没有显示(也许只是我?)

<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)) || (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
});
}
});
</script>


<link media="screen,projection" type="text/css" href="second-css-file.css"  rel="stylesheet" />

这里有一个链接到我的工作进行中的网站:http://www.hankins-design.co.uk/beta2/test/index.html

也许我错了，但我认为不支持css过渡的浏览器应该没有任何问题，因为他们应该直接跳到第二个css文件，没有延迟或持续时间。

我有兴趣知道如何搜索引擎友好的这种方法的看法。带着我的黑帽子，我想我可以用关键字填充一个页面，并对其不透明度应用9999s延迟。

我很想知道搜索引擎是如何处理转换延迟属性的，以及使用上述方法，他们是否甚至可以看到页面上的链接和信息。

更重要的是，我真的想知道为什么这是不一致的每次页面加载，我怎么能纠正这一点!

我希望这能产生一些观点和意见，如果没有别的!

小开

最佳答案

你可以在页面加载时运行一个CSS动画，而不使用任何JavaScript;你只需要使用CSS3关键帧。

让我们看一个例子……

下面是只使用CSS3滑动导航菜单的演示:

@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;}

<header>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Products</a>
<a href="#">Contact</a>
</header>

分解一下……

这里的重要部分是关键帧动画，我们称之为slideInFromLeft…

@keyframes slideInFromLeft {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}

.．.这基本上是说“在开始的时候，标题将会在屏幕的左边边缘的全宽处，而在结束的时候将会在适当的位置”。

第二部分是调用slideInFromLeft动画:

animation: 1s ease-out 0s 1 slideInFromLeft;

以上是简写版本，为了清晰起见，这里是详细版本:

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 */

你可以做各种有趣的事情，比如滑动内容，或者吸引人们的注意力。

这是W3C必须说的

小开

只需要很少的Javascript:

window.onload = function() {
document.body.className += " loaded";
}

现在来看CSS:

.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;
}

我知道这个问题说的是“不使用Javascript”，但我认为值得指出的是，有一个简单的解决方案，只需要一行Javascript。

它甚至可以是内联Javascript，就像这样:

<body onload="document.body.className += ' loaded';" class="fadein">

这就是所有需要的JavaScript。

小开

类似于@Rolf的解决方案，但忽略了对外部函数的引用或使用类。如果不透明度是保持固定为1一旦加载，只需使用内联脚本直接改变不透明度通过风格。例如

<body class="fadein" onload="this.style.opacity=1">

其中CSS sytle“fadein”是根据@Rolf定义的，定义过渡和设置不透明度为初始状态(即0)

唯一的问题是，这并不适用于SPAN或DIV元素，因为它们没有working onload事件

小开

我想我已经找到了一种解决OP问题的方法，而不是一开始就过渡。load'的页面-我发现使用一个动画的不透明度淡入有同样的效果，(我正在寻找与OP相同的东西)。

所以我想让正文从白色(与网站背景相同)渐隐到页面加载的黑色文本颜色-我只从周一开始编码，所以我正在寻找一个'上。load'风格的东西代码，但不知道JS -所以这是我的代码，为我工作得很好。

#main p {
animation: fadein 2s;
}
@keyframes fadein {
from { opacity: 0}
to   { opacity: 1}
}

不管出于什么原因，这只对.class不起作用(至少对我的不起作用)

希望这有助于-我知道这个网站帮助我很多!

小开

如果有人同时做两个过渡有问题，这是我做的。我需要文字从上到下的页面加载。

HTML

<body class="existing-class-name" onload="document.body.classList.add('loaded')">

HTML

<div class="image-wrapper">
<img src="db-image.jpg" alt="db-image-name">
<span class="text-over-image">DB text</span>
</div>

CSS

.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;
}

不知道为什么我一直试图在1个选择器中使用2个转换声明，(不是真的)认为它会使用两者。

小开

CSS只有延迟3s

这里有几点需要注意:

一次调用多个动画
我们创建一个等待动画，它只是延迟实际的动画(在我们的例子中是第二个动画)。

代码:

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; }
}

小开

更简单的解决方案(仍然使用[一行内联]javascript):

使用这个作为正文标签: 注意，body.或this.对我不起作用。只有长久;querySelector允许使用classList.remove (Linux Chromium)

<body class="onload" onload="document.querySelector('body').classList.remove('onload')">

并将这一行添加到其他CSS规则之上。

body.onload *{ transform: none !important; }

请注意，这可以应用于不透明度(正如OP[其他海报]所要求的那样)，只需使用不透明度作为过渡触发器即可。(甚至可以工作在任何其他CSS规则以相同的方式，你可以使用多个类之间的触发显式延迟)

逻辑是一样的。强制不转换(在__abc1的所有子元素上使用__abc0，一旦文档被加载，删除类以触发css中指定的所有元素上的所有转换。

下面是第一个答案(见上面的简短回答)

这里有一个相反的解决方案:

制作你的html布局，并根据你的最终结果设置css(与所有你想要的转换)。
根据您的喜好设置转换属性
添加一个类(例如:waitload)到你想在加载后转换的元素。CSS关键字重要的!是这里的关键字。
一旦文档被加载，使用JS从元素中删除类以开始转换(并删除转换:none override)。

在多个元素上使用多重转换。没有尝试跨浏览器兼容性。

div {
width: fit-content;
}


#rotated {
transform: rotate(-50deg)/* any other transformation */
;
transition: 6s;
}


#translated {
transform: translate(90px)/* any other transformation */
;
transition: 6s;
}


.waitload {
transform: none !important;
}

<div id='rotated' class='waitload'>
rotate after load
</div>
<div id='translated' class='waitload'>
trasnlate after load
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', init);


function init() {
[...document.querySelectorAll('.waitload')]
.map(e => e.classList.remove('waitload'));
}
</script>

小开

你也可以使用自定义css类(className)来代替css标签。

.不需要外部包

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>
);
};

小开

将此添加到您的CSS淡入动画

body{animation: 2s ease-out 0s 1 FadeIn;}
@keyframes FadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}

如果你想让它加载得更慢，就增加放松时间

加载Css3过渡动画?

让我们看一个例子……

分解一下……