是否有可能使用CSS3过渡动画页面加载而不使用Javascript?
这是我想要的，但在页面加载:
image-slider.html
到目前为止我发现了什么
CSS3过渡-延迟，一种延迟元素效果的方法。只适用于悬停。 CSS3关键帧，工作在负载上，但非常慢。正因为如此，它并不有用。 CSS3转换足够快，但页面加载时没有动画效果。
当前回答
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过渡(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延迟。
我很想知道搜索引擎是如何处理转换延迟属性的，以及使用上述方法，他们是否甚至可以看到页面上的链接和信息。
更重要的是，我真的想知道为什么这是不一致的每次页面加载，我怎么能纠正这一点!
我希望这能产生一些观点和意见，如果没有别的!
更简单的解决方案(仍然使用[一行内联]javascript):
使用这个作为正文标签: 注意这个主体。或者这个。对我没用。只有长久;querySelector允许使用classList。remove (Linux Chromium)
<body class="onload" onload="document.querySelector('body').classList.remove('onload')">
并将这一行添加到其他CSS规则之上。
body.onload *{ transform: none !important; }
请注意，这可以应用于不透明度(正如OP[其他海报]所要求的那样)，只需使用不透明度作为过渡触发器即可。(甚至可以工作在任何其他CSS规则以相同的方式，你可以使用多个类之间的触发显式延迟)
逻辑是一样的。强制不转换(with:none !importanton body的所有子元素。Onloadand一旦文档被加载，删除类以触发css中指定的所有元素上的所有转换。
下面是第一个答案(见上面的简短回答)
这里有一个相反的解决方案:
制作你的html布局，并根据你的最终结果设置css(与所有你想要的转换)。 根据您的喜好设置转换属性 添加一个类(例如:waitload)到你想在加载后转换的元素。CSS关键字!important是这里的关键字。 一旦文档被加载，使用JS从元素中删除类以开始转换(并删除转换:none override)。
在多个元素上使用多重转换。没有尝试跨浏览器兼容性。
div { width: fit-content; } #rotated { transform: rotate(-50deg)/* any other transformation */ ; transition: 6s; } #translated { transform: translate(90px)/* any other transformation */ ; transition: 6s; } .waitload { transform: none !important; } <div id='rotated' class='waitload'> rotate after load </div> <div id='translated' class='waitload'> trasnlate after load </div> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', init); function init() { [...document.querySelectorAll('.waitload')] .map(e => e.classList.remove('waitload')); } </script>
我想我已经找到了一种解决OP问题的方法，而不是一开始就过渡。load'的页面-我发现使用一个动画的不透明度淡入有同样的效果，(我正在寻找与OP相同的东西)。
所以我想让正文从白色(与网站背景相同)渐隐到页面加载的黑色文本颜色-我只从周一开始编码，所以我正在寻找一个'上。load'风格的东西代码，但不知道JS -所以这是我的代码，为我工作得很好。
#main p {
animation: fadein 2s;
}
@keyframes fadein {
from { opacity: 0}
to { opacity: 1}
}
不管出于什么原因，这只对.class的#id不起作用(至少对我的不起作用)
希望这有助于-我知道这个网站帮助我很多!
你也可以使用自定义css类(className)来代替css标签。 不需要外部包装。
import React, { useState, useEffect } from 'react';
import { css } from '@emotion/css'
const Hello = (props) => {
const [loaded, setLoaded] = useState(false);
useEffect(() => {
// For load
setTimeout(function () {
setLoaded(true);
}, 50); // Browser needs some time to change to unload state/style
// For unload
return () => {
setLoaded(false);
};
}, [props.someTrigger]); // Set your trigger
return (
<div
css={[
css`
opacity: 0;
transition: opacity 0s;
`,
loaded &&
css`
transition: opacity 2s;
opacity: 1;
`,
]}
>
hello
</div>
);
};
这是一个棘手的问题。
答案是“不太可能”。
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是最后激活的。
