是否有可能使用CSS3过渡动画页面加载而不使用Javascript?
这是我想要的，但在页面加载:
image-slider.html
到目前为止我发现了什么
CSS3过渡-延迟，一种延迟元素效果的方法。只适用于悬停。 CSS3关键帧，工作在负载上，但非常慢。正因为如此，它并不有用。 CSS3转换足够快，但页面加载时没有动画效果。
当前回答
我想我已经找到了一种解决OP问题的方法，而不是一开始就过渡。load'的页面-我发现使用一个动画的不透明度淡入有同样的效果，(我正在寻找与OP相同的东西)。
所以我想让正文从白色(与网站背景相同)渐隐到页面加载的黑色文本颜色-我只从周一开始编码，所以我正在寻找一个'上。load'风格的东西代码，但不知道JS -所以这是我的代码，为我工作得很好。
#main p {
animation: fadein 2s;
}
@keyframes fadein {
from { opacity: 0}
to { opacity: 1}
}
不管出于什么原因，这只对.class的#id不起作用(至少对我的不起作用)
希望这有助于-我知道这个网站帮助我很多!
其他回答
这是一个棘手的问题。
答案是“不太可能”。
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是最后激活的。
类似于@Rolf的解决方案，但忽略了对外部函数的引用或使用类。如果不透明度是保持固定为1一旦加载，只需使用内联脚本直接改变不透明度通过风格。例如
<body class="fadein" onload="this.style.opacity=1">
其中CSS sytle“fadein”是根据@Rolf定义的，定义过渡和设置不透明度为初始状态(即0)
唯一的问题是，这并不适用于SPAN或DIV元素，因为它们没有working onload事件
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; }
}
你可以在页面加载时运行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是这么说的。
将此添加到您的CSS淡入动画
body{animation: 2s ease-out 0s 1 FadeIn;}
@keyframes FadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
如果你想让它加载得更慢，就增加放松时间
