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

CSS淡入图像

回答

相关问题