テキストへの遷移

Question

私は本当にhtmlでのトランジションが大好きですが、テキストやh2でどのようにトランジションを行うのか分かりません。それは

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

であるように私は私がH2でこれを試すか、それが動作しないテキストときに

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

問題があるイメージに知っている：

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>