Web サイトのロゴにフェードイン効果を追加しました。
#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>
一見すると、うまく機能しているように見えます。しかし、2 ページ目 (3 ページ目、...) ではロゴが表示されるだけで、IE9、FireFox 19、Opera 12 ではフェードインしません。フェードイン効果は Safari 5 と Chrome 25 でのみ利用できます。すべてのページ。
私は Web デザインをすることはほとんどありませんが、CSS で遊んでいるときに偶然見つけた機能があると便利です。年に 1 回も使わない jQuery のような大きなライブラリの使い方を学び始めるのは適切ではないと思います。
すべてのページで他のブラウザと連携させる簡単な方法はありますか?