使用CSS对页面加载的淡入效果

本文翻译自：Using CSS for fade-in effect on page load

Can CSS Transitions be used to allow a text paragraph to fade-in on page load? CSS Transitions可用于允许文本段落在页面加载时淡入吗？

I really like how it looks on http://dotmailapp.com/ and would love to use a similar effect using CSS. 我真的很喜欢它在http://dotmailapp.com/上的样子，并且喜欢使用CSS使用类似的效果。

Note: The domain has since been purchased and no longer has the effect mentioned. 注意：该域名已被购买，不再具有上述效果。 An archived copy can be viewed on the Wayback Machine . 可以在Wayback Machine上查看存档副本。

Illustration 插图

Having this markup: 有这个标记：

<div id="test">    <p>This is a test</p>
</div>

With the following CSS rule: 使用以下CSS规则：

#test p {opacity: 0;margin-top: 25px;font-size: 21px;text-align: center;-webkit-transition: opacity 2s ease-in;-moz-transition: opacity 2s ease-in;-o-transition: opacity 2s ease-in;-ms-transition: opacity 2s ease-in;transition: opacity 2s ease-in;
}

How can the transition be triggered on load? 如何在加载时触发转换？

#1楼

参考：https://stackoom.com/question/n0O7/使用CSS对页面加载的淡入效果

#2楼

Method 1: 方法1：

If you are looking for a self-invoking transition then you should use CSS3 Animations , they aren't supported as well but this is exactly the kind of thing they were made for. 如果您正在寻找一个自我调用的过渡，那么您应该使用CSS3动画，它们也不受支持，但这正是它们的目的。

CSS CSS

#test p {margin-top: 25px;font-size: 21px;text-align: center;-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */-moz-animation: fadein 2s; /* Firefox < 16 */-ms-animation: fadein 2s; /* Internet Explorer */-o-animation: fadein 2s; /* Opera < 12.1 */animation: fadein 2s;
}@keyframes fadein {from { opacity: 0; }to   { opacity: 1; }
}/* Firefox < 16 */
@-moz-keyframes fadein {from { opacity: 0; }to   { opacity: 1; }
}/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {from { opacity: 0; }to   { opacity: 1; }
}/* Internet Explorer */
@-ms-keyframes fadein {from { opacity: 0; }to   { opacity: 1; }
}/* Opera < 12.1 */
@-o-keyframes fadein {from { opacity: 0; }to   { opacity: 1; }
}

Demo 演示

http://jsfiddle.net/SO_AMK/VV2ek/ http://jsfiddle.net/SO_AMK/VV2ek/

Browser Support 浏览器支持

All modern browsers, IE 10+: http://caniuse.com/#feat=css-animation 所有现代浏览器，IE 10+： http ： //caniuse.com/#feat=css-animation

Method 2: 方法2：

Alternatively, you can use jQuery (or plain JS, see third code block) to change the class on load: 或者，您可以使用jQuery（或普通JS，请参阅第三个代码块）来更改加载时的类：

jQuery jQuery的

$("#test p").addClass("load");

CSS CSS

#test p {opacity: 0;font-size: 21px;margin-top: 25px;text-align: center;-webkit-transition: opacity 2s ease-in;-moz-transition: opacity 2s ease-in;-ms-transition: opacity 2s ease-in;-o-transition: opacity 2s ease-in;transition: opacity 2s ease-in;
}#test p.load {opacity: 1;
}

Plain JS (not in demo) 普通JS（不在演示中）

document.getElementById("test").children[0].className += " load";

Demo 演示

http://jsfiddle.net/SO_AMK/a9dnW/ http://jsfiddle.net/SO_AMK/a9dnW/

Browser Support 浏览器支持

All modern browsers, IE 10+: http://caniuse.com/#feat=css-transitions 所有现代浏览器，IE 10+： http ： //caniuse.com/#feat=css-transitions

Method 3: 方法3：

Or, you can use the method that .Mail uses: 或者，您可以使用.Mail使用的方法：

jQuery jQuery的

$("#test p").delay(1000).animate({ opacity: 1 }, 700);

CSS CSS

#test p {opacity: 0;font-size: 21px;margin-top: 25px;text-align: center;
}

Demo 演示

http://jsfiddle.net/SO_AMK/a9dnW/3/ http://jsfiddle.net/SO_AMK/a9dnW/3/

Browser Support 浏览器支持

jQuery 1.x : All modern browsers, IE 6+: http://jquery.com/browser-support/ jQuery 1.x ：所有现代浏览器，IE 6+： http ： //jquery.com/browser-support/
jQuery 2.x : All modern browsers, IE 9+: http://jquery.com/browser-support/ jQuery 2.x ：所有现代浏览器，IE 9+： http ： //jquery.com/browser-support/

This method is the most cross-compatible as the target browser does not need to support CSS3 transitions or animations. 此方法是最交叉兼容的，因为目标浏览器不需要支持CSS3过渡或动画。

#3楼

In response to @AMK's question about how to do transitions without jQuery. 回应@AMK关于如何在没有jQuery的情况下进行转换的问题。 A very simple example I threw together. 一个非常简单的例子我一起扔了。 If I had time to think this through some more, I might be able to eliminate the javascript altogether: 如果我有时间考虑更多，我可以完全消除javascript：

<style>
body {background-color: red;transition: background-color 2s ease-in;
}
</style>
<script>
window.onload = function() {document.body.style.backgroundColor = '#00f';
}
</script>
<body><p>test</p>
</body>

#4楼

You can use the onload="" HTML attribute and use JavaScript to adjust the opacity style of your element. 您可以使用onload="" HTML属性并使用JavaScript来调整元素的不透明度样式。

Leave your CSS as you proposed. 保留你提出的CSS。 Edit your HTML code to: 将您的HTML代码编辑为：

<body onload="document.getElementById(test).style.opacity='1'"><div id="test"><p>This is a test</p></div>
</body>

This also works to fade-in the complete page when finished loading: 这也适用于在完成加载时淡入整个页面：

HTML: HTML：

<body onload="document.body.style.opacity='1'">
</body>

CSS: CSS：

body{ opacity:0;transition: opacity 2s;-webkit-transition: opacity 2s; /* Safari */
}

Check the W3Schools website: transitions and an article for changing styles with javascript . 查看W3Schools网站：转换和使用javascript更改样式的文章。