使用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楼

参考：