有没有可能在不使用Javascript的情况下在页面加载时使用CSS3过渡动画?
这是我想要的,但是在页面加载时:
http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html
到目前为止我所发现的
发布于 2012-09-28 18:59:09
您可以在页面加载时运行CSS关键帧动画,而无需使用任何JavaScript;您只需使用CSS3 JavaScript即可。
让我们来看一个例子。
以下是仅使用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);
}
}
...which基本上是这样说的:“在开始时,标题将以全宽离开屏幕的左侧边缘,而在结束时将处于适当位置”。
第二部分是调用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 */
你可以做各种各样有趣的事情,比如在内容中滑动,或者引起人们对区域的注意。
发布于 2013-07-07 08:49:41
只需要很少的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。
发布于 2016-02-19 22:17:36
我想我已经找到了一种解决OP问题的方法--而不是以页面的“on.load”开头的过渡--我发现使用动画来淡入不透明效果是一样的,(我正在寻找与OP相同的东西)。
所以我想让正文文本在页面加载时从白色(和网站背景一样)淡入到黑色文本颜色--我从周一才开始编码,所以我一直在寻找一个'on.load‘风格的东西代码,但我还不知道JS --所以这是我的代码,对我来说效果很好。
#main p {
animation: fadein 2s;
}
@keyframes fadein {
from { opacity: 0}
to { opacity: 1}
}
无论出于什么原因,这并不适用于.class
,只适用于#id
(至少在我的平台上不适用)。
希望这对我有帮助--因为我知道这个网站对我帮助很大!
https://stackoverflow.com/questions/6805482
复制相似问题