Html 如何在加载页面上使用淡入文本/图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34602395/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use fade-in text/image on page is loaded
提问by snazzyconnor
I'm building a small website and would like to get the text (and an image when I add one) to fade inwhen someone accesses the website?
我正在构建一个小型网站，并希望在有人访问该网站时让文本（以及添加图像时的图像）淡入淡出？
Thanks!
谢谢！
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
body {
background-color: lightgrey;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
<style>
p.one {
border: 1px lightgrey;
background-color: lightgrey;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 40px;
padding-left: 0px;
}
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">Our Routes</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<img class="displayed" src="E:\Users\PC\Documents\Image" alt="...">
<h1 align="center"> HOME </h1>
<p class="one" , align="center"> Text Goes here
</p>
</body>
</html>
回答by Joel
http://codepen.io/JTBennett/pen/GorVRL[your site w/ fade and motion] http://codepen.io/JTBennett/pen/BjpXRo[example of the following instructions]
http://codepen.io/JTBennett/pen/GorVRL[您的网站带有淡入淡出和运动] http://codepen.io/JTBennett/pen/BjpXRo[以下说明的示例]
Here's an example. The HTML requires a div to be wrapped around the whole of the body content if you want it to fade in all at once. Look for this:
这是一个例子。如果您希望它一次全部淡入，HTML 需要一个 div 环绕整个正文内容。寻找这个：
<div class="wrapper fade-in">
There's a lot of stuff you can do with CSS, I've been using it for years and I still learn something new every once in a while.
你可以用 CSS 做很多事情，我已经使用它很多年了，我仍然偶尔会学到一些新的东西。
All the animation commands will appear in your CSS like so:
所有动画命令都将出现在您的 CSS 中，如下所示：
@keyframes fadeIn
to {
opacity: 1; }
Then your divs are going to have a class that calls the animation (@keyframes):
然后你的 div 将有一个调用动画的类（@keyframes）：
.fade-in {
animation: fadeIn 1.0s ease forwards;
[other div properties can be included here]
}
The HTML will look like this:
HTML 将如下所示：
<div class="fade-in">
[content]
</div>
Finally, you'll need to make sure you include the vendor codes to make it compatible with all browsers [which adds a fair amount of code, which is why jQuery can be a better option for this stuff]:
最后，您需要确保包含供应商代码以使其与所有浏览器兼容 [这增加了大量代码，这就是 jQuery 可以成为这些东西的更好选择的原因]：
@keyframes fadeIn{
0% {
opacity:0;
}
100% {
opacity:1;
}
}
@-moz-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
@-webkit-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
@-o-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
@-ms-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
The vendor codes will have to be duplicated again in your div class in the CSS:
供应商代码必须在 CSS 的 div 类中再次复制：
.fade-in {
animation: fadeIn ease 5s;
-webkit-animation: fadeIn ease 5s;
-moz-animation: fadeIn ease 5s;
-o-animation: fadeIn ease 5s;
-ms-animation: fadeIn ease 5s;
}
The effect can be achieved with jQuery much quicker, as you can see in one of the other answers here.
使用 jQuery 可以更快地实现效果，正如您在此处的其他答案之一中看到的那样。
After you've learned to do it by hand, I suggest playing around with this CSS3 animation generator if you want to save a bit of time: http://cssanimate.com/
在您学会了手工制作之后，如果您想节省一点时间，我建议您使用这个 CSS3 动画生成器：http: //cssanimate.com/
Just make sure you understand it first though.
不过，请确保您先了解它。
Lastly, this is an example of jQuery performing similar functions (though using SVGs instead of divs this time, same process though): http://codepen.io/JTBennett/pen/YwpBaQ
最后，这是 jQuery 执行类似功能的示例（尽管这次使用 SVG 而不是 div，但过程相同）：http: //codepen.io/JTBennett/pen/YwpBaQ
回答by RooWM
You can fade in elements when the document loads by loading the page with the elements hidden (opacity : 0;) in CSS. Then on document ready you can remove the class, so long as it has a transition for that css property—you'll have an effect.
您可以通过在 CSS 中加载隐藏元素（opacity : 0;）的页面，在文档加载时淡入元素。然后在文档准备好后，您可以删除该类，只要它具有该 css 属性的过渡 - 您就会有效果。
CSS
CSS
div {
transition: opacity 2s;
opacity: 1;
}
.hidden {
opacity: 0;
}
JS
JS
$(document).ready(function(){
$('.hidden').removeClass('hidden');
});
回答by Justin
I don't know what element you have but you can do a few things.
我不知道你有什么元素，但你可以做一些事情。
If you are using javascript, or jquery you can make an element fade in easily.
如果您使用 javascript 或 jquery，您可以轻松地使元素淡入。
Jquery:
查询：
$(document).ready(function(){
$('.myItemClass').fadeIn();
});
You can also do it with just CSS
你也可以只用 CSS
CSS:
CSS：
/* The animation code */
@keyframes example {
from {opacity: 0;}
to {opacity: 1;}
}
.myClass {
animation-name: example;
animation-duration: 1s;
}
回答by Developer Vicky
It is very simple don't need even jqyery, pure CSS and pure Javascript.
它非常简单，甚至不需要 jqyery、纯 CSS 和纯 Javascript。
CSS
CSS
body {
opacity:0;
transition: 300ms opacity;
}
Javascript
Javascript
function pageLoaded() {
document.querySelector("body").style.opacity = 1;
}
window.onload = pageLoaded;
