加载css3过渡动画？

Question

加载css3过渡动画？

是否可以在不使用Javascript的情况下在页面加载时使用CSS3过渡动画？

这是我想要的，但在页面加载：

http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html

到目前为止我发现了什么

• CSS3 transition-delay，一种延迟元素影响的方法。仅适用于悬停。

• CSS3关键帧，在加载时工作，但速度极慢。因此没用。

• CSS3过渡速度足够快，但不会在页面加载时设置动画。

Answer 1

您可以在页面加载时运行CSS动画而无需使用任何JavaScript;&nbsp;你只需要使用CSS3关键帧。我们来看一个例子......以下是仅使用CSS3滑动到位的导航菜单的演示：@keyframes&nbsp;slideInFromLeft&nbsp;{ &nbsp;&nbsp;0%&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;transform:&nbsp;translateX(-100%); &nbsp;&nbsp;} &nbsp;&nbsp;100%&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;transform:&nbsp;translateX(0); &nbsp;&nbsp;}}header&nbsp;{&nbsp;&nbsp; &nbsp;&nbsp;/*&nbsp;This&nbsp;section&nbsp;calls&nbsp;the&nbsp;slideInFromLeft&nbsp;animation&nbsp;we&nbsp;defined&nbsp;above&nbsp;*/ &nbsp;&nbsp;animation:&nbsp;1s&nbsp;ease-out&nbsp;0s&nbsp;1&nbsp;slideInFromLeft; &nbsp;&nbsp; &nbsp;&nbsp;background:&nbsp;#333; &nbsp;&nbsp;padding:&nbsp;30px;}/*&nbsp;Added&nbsp;for&nbsp;aesthetics&nbsp;*/&nbsp;body&nbsp;{margin:&nbsp;0;font-family:&nbsp;"Segoe&nbsp;UI",&nbsp;Arial,&nbsp;Helvetica,&nbsp;Sans&nbsp;Serif;}&nbsp;a&nbsp;{text-decoration:&nbsp;none;&nbsp;display:&nbsp;inline-block;&nbsp;margin-right:&nbsp;10px;&nbsp;color:#fff;}<header> &nbsp;&nbsp;<a&nbsp;href="#">Home</a> &nbsp;&nbsp;<a&nbsp;href="#">About</a> &nbsp;&nbsp;<a&nbsp;href="#">Products</a> &nbsp;&nbsp;<a&nbsp;href="#">Contact</a></header>分解......这里的重要部分是关键帧动画，我们称之为slideInFromLeft......@keyframes slideInFromLeft {&nbsp; &nbsp; 0% {&nbsp; &nbsp; &nbsp; &nbsp; transform: translateX(-100%);&nbsp; &nbsp; }&nbsp; &nbsp; 100% {&nbsp; &nbsp; &nbsp; &nbsp; transform: translateX(0);&nbsp; &nbsp; }}...基本上说“在开始时，标题将从屏幕的左边缘以其整个宽度离开，并且最后将到位”。第二部分是调用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所说的。

Answer 2

很少有Javascript是必要的：window.onload&nbsp;=&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;document.body.className&nbsp;+=&nbsp;"&nbsp;loaded";}现在的CSS：.fadein&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;opacity:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;-moz-transition:&nbsp;opacity&nbsp;1.5s; &nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition:&nbsp;opacity&nbsp;1.5s; &nbsp;&nbsp;&nbsp;&nbsp;-o-transition:&nbsp;opacity&nbsp;1.5s; &nbsp;&nbsp;&nbsp;&nbsp;transition:&nbsp;opacity&nbsp;1.5s;}body.loaded&nbsp;.fadein&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;opacity:&nbsp;1;}我知道问题是“没有Javascript”，但我认为值得指出的是，有一个简单的解决方案涉及一行Javascript。它甚至可以是内联Javascript，类似的东西：<body&nbsp;onload="document.body.className&nbsp;+=&nbsp;'&nbsp;loaded';"&nbsp;class="fadein">这就是所有需要的JavaScript。

Answer 3

我觉得我已经找到了OP问题的一种解决方法 - 而不是从页面的'on.load'开始的过渡 - 我发现使用动画来实现不透明效果的效果相同，（我一直在寻找与OP相同的事情。所以我希望在页面加载时将正文文本从白色（与网站背景相同）淡入到黑色文本颜色 - 而且我从星期一开始只编码所以我正在寻找'on.load'样式的事物代码，但是还不知道JS - 所以这里的代码对我来说效果很好。#main&nbsp;p&nbsp;{ &nbsp;&nbsp;animation:&nbsp;fadein&nbsp;2s;}@keyframes&nbsp;fadein&nbsp;{ &nbsp;&nbsp;from&nbsp;{&nbsp;opacity:&nbsp;0} &nbsp;&nbsp;to&nbsp;&nbsp;&nbsp;{&nbsp;opacity:&nbsp;1}}而无论出于何种原因，这并不对工作.class只#id的（至少不是我的）希望这会有所帮助 - 我知道这个网站对我有很大的帮助！