文本转换

Question

我真的很喜欢html中的转换，但我不知道如何使用text或h2进行转换。我知道图像是

    img {
        opacity:0;
        -moz-transition: opacity 2s; /* Firefox 4 */
        -webkit-transition: opacity 2s; /* Safari and Chrome */
        -o-transition: opacity 2s;
        transition: opacity 2s;
        }

然后

<img onload="this.style.opacity='1';" src="https://s13.postimg.org/6p9r8rtrr/fgh.jpg" style="width:640px;height:360px;"/>

问题是当我用h2或文本尝试这个时它不起作用：

    h2 {
       opacity:0;
       -moz-transition: opacity 2s; /* Firefox 4 */
       -webkit-transition: opacity 2s; /* Safari and Chrome */
       -o-transition: opacity 2s;
       transition: opacity 2s;
       }

然后

<h2 onload="this.style.opacity='1';">What Person/Character are you thinking of?</h2>

但这不起作用。任何人都可以帮助我吗？

Answer 1

图片需要一些时间来加载，但文本没有相同的行为，文本元素当前不支持onload。 查看W3schools tutorial上元素的CSS3动画效果。

<强>段

h2 {
    opacity: 0;
    animation: fadein 2s forwards;
}
@keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

<h2>What Person/Character are you thinking of?</h2>