CSS淡入圖像

影響我添加淡入效果對於在網站上的標識：CSS淡入圖像

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

和

<div id="logo"><p><a href="index.html"><img src="img/logo.png" ... onload="this.style.opacity='1';" /></a></p></div>

起初看來，這似乎大大工作。但在第二個（第三，...）頁面上，只顯示徽標，不會在IE9或FireFox 19或Opera 12中淡入 - 僅在Safari 5和Chrome 25中淡入，淡入效果可用於每一頁。

我幾乎沒有做過網頁設計，這只是一個很好的功能，我偶然發現了CSS。我認爲開始學習如何使用像jQuery這樣的大型圖書館是不合適的，每年我會少用一次。

是否有一個簡單的方法，使其與所有頁面上的其他瀏覽器一起使用？

來源

2013-03-14 Bernhard Hiller

根據您的意見，這可能工作：

animation: fadein 2s; 
-moz-animation: fadein 2s; /* Firefox */ 
-webkit-animation: fadein 2s; /* Safari and Chrome */ 
-o-animation: fadein 2s; /* Opera */

如果你想對IE的支持，你應該使用jQuery。

來源

2013-03-14 08:02:53

我不使用「懸停」 - 圖像必須在顯示頁面時自動淡入。除了懸停指令，我試過

，但那沒有效果。 – 2013-03-14 09:31:21

以及如果更改-o轉換爲動畫？像這樣：動畫：fadein 2s; -moz-animation：fadein 2s;/* Firefox */ -webkit-animation：fadein 2s;/* Safari和Chrome */ -o-animation：fadein 2s;/* Opera */ – 2013-03-14 10:03:19

對不起，「動畫」在任何瀏覽器中都不起作用。 – 2013-03-14 11:21:25

回答

相關問題