在页面加载时使用CSS淡入效果
可以使用CSS转换来允许文本段落在页面加载时淡入？
我真的很喜欢它在http://dotmailapp.com/上的样子，并且喜欢使用CSS的类似效果。
注意：域名已经被购买，不再具有提及的效果。 可以在Wayback Machine上查看存档的副本。
插图
有这个标记：
<div id="test"> <p>This is a test</p> </div> 使用以下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; }
如何在加载时触发转换？
方法1：
如果你正在寻找一个自我调用的过渡，那么你应该使用CSS3动画 ，它们也不被支持，但这正是他们所做的事情。
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; } }
演示
浏览器支持
所有现代浏览器，IE 10+： http : //caniuse.com/#feat=css-animation
方法2：
或者，您可以使用jQuery（或普通的JS，请参阅第三个代码块）来更改加载的类：
jQuery的
$("#test p").addClass("load");
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; }
平原JS（不在演示中）
document.getElementById("test").children[0].className += " load";
演示
浏览器支持
所有现代浏览器，IE 10+： http : //caniuse.com/#feat=css-transitions
方法3：
或者，您可以使用.Mail使用的方法：
jQuery的
$("#test p").delay(1000).animate({ opacity: 1 }, 700);
CSS
#test p { opacity: 0; font-size: 21px; margin-top: 25px; text-align: center; }
演示
浏览器支持
jQuery 1.x ：所有现代浏览器，IE 6+： http : //jquery.com/browser-support/
jQuery 2.x ：所有现代浏览器，IE 9+： http : //jquery.com/browser-support/
由于目标浏览器不需要支持CSS3转换或动画，因此该方法是最具交叉兼容性的。
您可以使用onload="" HTML属性并使用JavaScript来调整元素的不透明度样式。
按照你的建议离开你的CSS。 编辑您的HTML代码来：
<body onload="document.getElementById(test).style.opacity='1'"> <div id="test"> <p>This is a test</p> </div> </body>
这也可以在完成加载时淡入整个页面：
HTML：
<body onload="document.body.style.opacity='1'"> </body>
CSS：
body{ opacity:0; transition: opacity 2s; -webkit-transition: opacity 2s; /* Safari */ }
检查W3Schools网站： 转换和一篇文章用javascript改变样式 。
回应@ AMK关于如何在没有jQuery的情况下进行转换的问题。 我扔了一个非常简单的例子。 如果我有时间思考这个问题，我可能会完全消除这个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>
