文本轉換

我真的很喜歡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; 
     }

然後

<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>

但這不起作用。誰能幫我？

來源

2016-11-18 kevinbestkiller

'onload'不適合'工作h2'它只對整個文檔，圖片，腳本和其他資源。 –

爲什麼使用'onload'直接應用在css.pictures文件中需要花費一些時間來進行加載。但文本不像這樣，並且加載不支持文本 – prasanth

看一下這個：http://stackoverflow.com/問題/ 6805482/css3-transition-animation-on-load – k97513

圖片需要一些時間才能加載，但文本不具有相同的行爲，並且文本元素當前不支持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>

來源

2016-11-18 13:56:26 prasanth

請刪除** onload **屬性，否則我會吃掉你。 – PDKnight

@PDKnight對不起..我被刪除onload – prasanth

回答

相關問題