是否有可能使用CSS3过渡动画页面加载而不使用Javascript?
这是我想要的，但在页面加载:
image-slider.html
到目前为止我发现了什么
CSS3过渡-延迟，一种延迟元素效果的方法。只适用于悬停。 CSS3关键帧，工作在负载上，但非常慢。正因为如此，它并不有用。 CSS3转换足够快，但页面加载时没有动画效果。
当前回答
不一定，因为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。
其他回答
你可以在页面加载时运行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。
更简单的解决方案(仍然使用[一行内联]javascript):
使用这个作为正文标签: 注意这个主体。或者这个。对我没用。只有长久;querySelector允许使用classList。remove (Linux Chromium)
<body class="onload" onload="document.querySelector('body').classList.remove('onload')">
并将这一行添加到其他CSS规则之上。
body.onload *{ transform: none !important; }
请注意，这可以应用于不透明度(正如OP[其他海报]所要求的那样)，只需使用不透明度作为过渡触发器即可。(甚至可以工作在任何其他CSS规则以相同的方式，你可以使用多个类之间的触发显式延迟)
逻辑是一样的。强制不转换(with:none !importanton body的所有子元素。Onloadand一旦文档被加载，删除类以触发css中指定的所有元素上的所有转换。
下面是第一个答案(见上面的简短回答)
这里有一个相反的解决方案:
制作你的html布局，并根据你的最终结果设置css(与所有你想要的转换)。 根据您的喜好设置转换属性 添加一个类(例如:waitload)到你想在加载后转换的元素。CSS关键字!important是这里的关键字。 一旦文档被加载，使用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>
它将在鼠标第一次在屏幕上移动时开始，这主要是在到达后的一秒钟内，这里的问题是它将在离开屏幕时反转。
html:hover #animateelementid, body:hover #animateelementid {rotate ....}
这是我能想到的最好的东西:http://jsfiddle.net/faVLX/
全屏:http://jsfiddle.net/faVLX/embedded/result/
编辑见下面的评论: 这在任何触屏设备上都行不通，因为没有悬停，所以用户只有点击才会看到内容。——里奇·布拉德肖
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; }
}
