Jen*_*ell 172 css webkit css3 css-transitions css-animations
是否可以在不使用Javascript的情况下在页面加载时使用CSS3过渡动画？
这是我想要的,但在页面加载:
http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html
到目前为止我发现了什么
Chr*_*les 408
您可以在页面加载时运行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 */
你可以做各种有趣的事情,比如滑动内容,或引起对区域的注意.
Rol*_*olf 25
很少有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.
小智 20
我觉得我已经找到了OP问题的一种解决方法 - 而不是从页面的'on.load'开始的过渡 - 我发现使用动画来实现不透明效果的效果相同,(我一直在寻找与OP相同的事情.
所以我希望在页面加载时将正文文本从白色(与网站背景相同)淡入到黑色文本颜色 - 而且我从星期一开始只编码所以我正在寻找'on.load'样式的事物代码,但是还不知道JS - 所以这里的代码对我来说效果很好.
#main p {
animation: fadein 2s;
}
@keyframes fadein {
from { opacity: 0}
to { opacity: 1}
}
而无论出于何种原因,这并不对工作.class只#id的(至少不是我的)
希望这会有所帮助 - 我知道这个网站对我有很大的帮助!
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不是功能层.它没有任何意识到发生了什么或何时发生.它仅用于向不同的"标志"(类,ID,状态)添加表示层.
默认情况下,CSS/DOM不提供任何类型的"on load"状态供CSS使用.如果你想/能够使用JavaScript,你可以分配一个类body来激活一些CSS.
话虽这么说,你可以为此创建一个hack.我会在这里给出一个例子,但它可能适用于你的情况,也可能不适用.
我们的假设是"接近"是"足够好":
<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.