加载css3过渡animation？
有没有可能使用页面加载CSS3转换animation，而不使用JavaScript？
这是我想要的，但在页面加载：
http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html
我到目前为止发现的
- CSS3转换延迟 ，一种延迟对元素的影响的方法。 只适用于hover。
- CSS3的关键帧 ，负载工作，但速度非常缓慢。 没有用，因为这一点。
- CSS3过渡足够快，但不要在页面加载时animation。
您可以在页面加载运行CSSanimation而不使用任何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>
很less的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”，但我认为值得指出的是，有一个简单的解决scheme涉及到一行Javascript。
它甚至可以是内联的Javascript，就像这样：
<body onload="document.body.className += ' loaded';">
这就是所有需要的JavaScript。
我想我已经find了OP问题的一种解决方法 – 而不是从页面的“on.load”开始的转换 – 我发现使用不透明度淡入淡出的animation效果相同（我一直在寻找与OP相同）。
所以我想让正文文本从白色（与网站背景相同）淡入到页面加载时的黑色文本颜色 – 而且自从星期一开始我就一直在编码，所以我正在寻找一个“on.load”风格的代码，但不知道JS – 所以这里是我的代码，对我很好。
#main p { animation: fadein 2s; } @keyframes fadein { from { opacity: 0} to { opacity: 1} }
无论什么原因，这不适用于.class只有#id （至less不是我的）
希望这有助于 – 因为我知道这个网站帮了我很多！
那么，这是一个棘手的问题。
答案是“不是真的”。
CSS不是一个function层。 它不知道发生了什么或什么时候发生。 它只是简单地将表示层添加到不同的“标志”（类，ID，状态）。
默认情况下，CSS / DOM不提供CSS的任何“加载”状态。 如果你想/能够使用JavaScript，你会分配一个类到body或某个东西来激活一些CSS。
这就是说，你可以创build一个黑客。 我将在这里举一个例子，但它可能会或可能不适用于您的情况。
我们正在假设“closures”是“足够好”：
<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将被最后激活。
以鼠标hover的方式启动它。当鼠标第一次在屏幕上移动时，它将会开始，女性在arival之后一秒钟内就会启动，这里的问题是，当屏幕
html:hover #animateelementid, body:hover #animateelementid {rotate ....}
这是我能想到的最好的事情： http : //jsfiddle.net/faVLX/
全屏： http : //jsfiddle.net/faVLX/embedded/result/
编辑见下面的评论：
这不会在任何触摸屏设备上工作，因为没有hover，所以用户不会看到内容，除非他们点击它。 – 丰富的布拉德肖
类似于@ Rolf的解决scheme，但可以跳过对外部函数的引用或者使用类。 如果不透明度在加载后保持为1，则只需使用内联脚本直接通过样式更改不透明度即可。 例如
<body class="fadein" onload="this.style.opacity=1">
CSS默认情况下，按照@ Rolf定义“淡入淡出”，定义转换并将不透明度设置为初始状态（即0）
唯一的问题是，这不适用于SPAN或DIV元素，因为他们没有工作onload事件
好吧，我设法实现了一个animation，当页面加载只使用CSS转换（sorting！）：
我已经创build了2个CSS样式表：第一个是我想如何在animation之前的HTML样式…第二个是我希望在animation执行后的页面。
我不完全理解我是如何做到这一点，但它只适用于两个CSS文件（都在我的文档头）由一些JavaScript分隔如下。
我已经testing了这与Firefox，Safari浏览器和歌剧。 有时animation的作品，有时直接跳到第二个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文件没有延迟或持续时间。
我有兴趣了解如何search引擎友好这种方法的意见。 用我的黑帽子，我想我可以用关键字填充页面，并在其不透明度上延迟9999秒。
我很想知道search引擎如何处理transition-delay属性，以及使用上面的方法，他们甚至会看到页面上的链接和信息。
更重要的是，我真的很想知道为什么这不一致每次页面加载，我怎么可以纠正这一点！
如果没有其他的东西，我希望这会产生一些意见和看法！
不是真的，因为尽可能使用CSS，但是元素可能还没有绘制出来。 你可以猜测延迟1或2秒，但这对于大多数人来说并不正确，这取决于他们的networking速度。
另外，如果你想淡入淡出的东西，它会需要隐藏内容的CSS传递。 如果用户没有CSS3转换，那么他们将永远不会看到它。
我build议使用jQuery（为了方便使用+你可能希望为其他UA添加animation）和一些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中添加的转换。 这样做的好处是，如果需要的话，可以轻松地在旧版浏览器中允许使用animation而不是第二个CSS。
