加载时的css3过渡动画？
有没有可能在不使用Javascript的情况下在页面加载时使用CSS3过渡动画？
这是我想要的，但是在页面加载时：
http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html
到目前为止我所发现的
- CSS3 transition-delay，提供了一种延迟元素效果的方法。只在hover.
- CSS3 Keyframe，上工作，在加载时工作，但速度极慢。没有用，因为that.
- CSS3 transition足够快，但在页面加载时不会有动画效果。
回答 13
Stack Overflow用户
发布于 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 */你可以做各种各样有趣的事情，比如在内容中滑动，或者引起人们对区域的注意。
Stack Overflow用户
发布于 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。
Stack Overflow用户
发布于 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
复制相似问题
腾讯云开发者
