加载css3过渡动画？是否可以在不使用Javascript的情况下在页面加载时使用CSS3过渡动画？这是我想要的，但在页面加载：http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html到目前为止我发现了什么CSS3 transition-delay，一种延迟元素影响的方法。仅适用于悬停。CSS3关键帧，在加载时工作，但速度极慢。因此没用。CSS3过渡速度足够快，但不会在页面加载时设置动画。
3 回答
狐的传说
TA贡献1804条经验 获得超3个赞
您可以在页面加载时运行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 */
你可以做各种有趣的事情，比如滑动内容，或引起对区域的注意。
慕哥6287543
TA贡献1831条经验 获得超10个赞
很少有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。
杨魅力
TA贡献1811条经验 获得超6个赞
我觉得我已经找到了OP问题的一种解决方法 - 而不是从页面的'on.load'开始的过渡 - 我发现使用动画来实现不透明效果的效果相同，（我一直在寻找与OP相同的事情。
所以我希望在页面加载时将正文文本从白色（与网站背景相同）淡入到黑色文本颜色 - 而且我从星期一开始只编码所以我正在寻找'on.load'样式的事物代码，但是还不知道JS - 所以这里的代码对我来说效果很好。
#main p {
animation: fadein 2s;}@keyframes fadein {
from { opacity: 0}
to { opacity: 1}}而无论出于何种原因，这并不对工作.class只#id的（至少不是我的）
希望这会有所帮助 - 我知道这个网站对我有很大的帮助！
- 3 回答
- 0 关注
- 699 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消