Question

我在网站上添加了徽标的淡入效果：

#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这样的大型库是不合适的，我每年会使用不到一次。

是否有一种简单的方法可以让它在所有页面上与其他浏览器一起使用？

Answer 1

根据您的评论，这可能会有效：

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

如果你想要支持IE，你应该使用jQuery。

CSS图像的淡入效果

1 个答案: