是否有可能使用CSS3过渡动画页面加载而不使用Javascript?
这是我想要的，但在页面加载:
image-slider.html
到目前为止我发现了什么
CSS3过渡-延迟，一种延迟元素效果的方法。只适用于悬停。 CSS3关键帧，工作在负载上，但非常慢。正因为如此，它并不有用。 CSS3转换足够快，但页面加载时没有动画效果。
当前回答
好吧，我已经成功地实现了一个动画，当页面加载仅使用css过渡(sort of!):
我已经创建了2个css样式表: 第一个是我想要在动画之前的html样式… 第二个是我想要的页面在动画完成后的样子。
我不完全明白我是如何做到这一点，但它只在两个css文件(在我的文档的头部)被一些javascript分开如下。
我已经在Firefox、safari和opera上进行了测试。有时动画工作，有时它直接跳到第二个css文件，有时页面似乎正在加载，但什么也没有显示(也许只是我?)
<link media="screen,projection" type="text/css" href="first-css-file.css" rel="stylesheet" />
<script language="javascript" type="text/javascript" src="../js/jQuery JavaScript Library v1.3.2.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
// iOS Hover Event Class Fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) ||
(navigator.userAgent.match(/iPad/i))) {
$(".container .menu-text").click(function(){ // Update class to point at the head of the list
});
}
});
</script>
<link media="screen,projection" type="text/css" href="second-css-file.css" rel="stylesheet" />
这是我正在进行中的网站的链接:http://www.hankins-design.co.uk/beta2/test/index.html
也许我错了，但我认为不支持css过渡的浏览器应该没有任何问题，因为他们应该直接跳到第二个css文件，没有延迟或持续时间。
我有兴趣知道如何搜索引擎友好的这种方法的看法。带着我的黑帽子，我想我可以用关键字填充一个页面，并对其不透明度应用9999s延迟。
我很想知道搜索引擎是如何处理转换延迟属性的，以及使用上述方法，他们是否甚至可以看到页面上的链接和信息。
更重要的是，我真的想知道为什么这是不一致的每次页面加载，我怎么能纠正这一点!
我希望这能产生一些观点和意见，如果没有别的!
其他回答
类似于@Rolf的解决方案，但忽略了对外部函数的引用或使用类。如果不透明度是保持固定为1一旦加载，只需使用内联脚本直接改变不透明度通过风格。例如
<body class="fadein" onload="this.style.opacity=1">
其中CSS sytle“fadein”是根据@Rolf定义的，定义过渡和设置不透明度为初始状态(即0)
唯一的问题是，这并不适用于SPAN或DIV元素，因为它们没有working onload事件
如果有人同时做两个过渡有问题，这是我做的。我需要文字从上到下的页面加载。
超文本标记语言
<body class="existing-class-name" onload="document.body.classList.add('loaded')">
超文本标记语言
<div class="image-wrapper">
<img src="db-image.jpg" alt="db-image-name">
<span class="text-over-image">DB text</span>
</div>
CSS
.text-over-image {
position: absolute;
background-color: rgba(110, 186, 115, 0.8);
color: #eee;
left: 0;
width: 100%;
padding: 10px;
opacity: 0;
bottom: 100%;
-webkit-transition: opacity 2s, bottom 2s;
-moz-transition: opacity 2s, bottom 2s;
-o-transition: opacity 2s, bottom 2s;
transition: opacity 2s, bottom 2s;
}
body.loaded .text-over-image {
bottom: 0;
opacity: 1;
}
不知道为什么我一直试图在1个选择器中使用2个转换声明，(不是真的)认为它会使用两者。
不一定，因为CSS是尽快应用的，但元素可能还没有绘制。你可以猜测延迟1或2秒，但这对大多数人来说并不合适，这取决于他们的互联网速度。
此外，如果你想淡入一些东西，例如，它将需要CSS隐藏要交付的内容。如果用户没有CSS3转换，那么他们将永远不会看到它。
我推荐使用jQuery(为了方便使用+你可能希望为其他无人机添加动画)和一些像这样的JS:
$(document).ready(function() {
$('#id_to_fade_in')
.css({"opacity":0}) // Set to 0 as soon as possible – may result in flicker, but it's not hidden for users with no JS (Googlebot for instance!)
.delay(200) // Wait for a bit so the user notices it fade in
.css({"opacity":1}); // Fade it back in. Swap css for animate in legacy browsers if required.
});
随着在CSS中添加的过渡。这样做的好处是，如果需要的话，可以很容易地允许在传统浏览器中使用animate而不是第二个CSS。
这是一个棘手的问题。
答案是“不太可能”。
CSS不是一个功能层。它不知道发生了什么，什么时候发生。它只是用来为不同的“标志”(类、id、状态)添加一个表示层。
默认情况下，CSS/DOM不提供任何类型的“on load”状态供CSS使用。如果你想要/能够使用JavaScript，你会分配一个类到body或其他东西来激活一些CSS。
话虽如此，你可以为此创建一个黑客。我在这里举个例子，但它可能适用于你的情况，也可能不适用。
我们假设“接近”就是“足够好”:
<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是最后激活的。
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:控制项目符号和<li>之间的空格
- 调试打印样式表的建议?
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 下一个元素的CSS选择器语法是什么?
- 是否有'box-shadow-color'属性?
- 在jQuery中的CSS类更改上触发事件
- 我如何用CSS跨浏览器绘制垂直文本?
- 如何获得box-shadow在左侧和右侧
- 相对定位一个元素，而不占用文档流中的空间
- 禁用身体滚动
- 使用jQuery动画addClass/removeClass
- 在一个CSS宽度的小数点后的位置是尊重?
- 检测输入是否有文本在它使用CSS -在一个页面上，我正在访问和不控制?
- 我怎么能选择一个特定的类的最后一个元素，而不是父里面的最后一个孩子?
- @media screen和(max-width: 1024px)在CSS中是什么意思?
