1

可能重复:
CSS 关键帧仅适用于 Chrome

我的网站使用 css 过渡来淡入三个图标(facebook、twitter、电子邮件)上的新图像。过渡在 Chrome 上运行良好,但在 Firefox 上不行。这是css狙击手:

.link-button > div{height:79px; width:79px; display:inline-block; zoom: 1; *display:inline; 
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;}

.link-button .facebook{background:url(../img/bt_facebook.png) center center no-repeat transparent;}
.link-button .facebook:hover{background-image:url(../img/bt_facebook_over.png);}
.link-button .twitter{background:url(../img/bt_twitter.png) center center no-repeat transparent;}
.link-button .twitter:hover{background-image:url(../img/bt_twitter_over.png);}
.link-button .email{background:url(../img/bt_email.png) center center no-repeat transparent;}
.link-button .email:hover{background-image:url(../img/bt_email_over.png);}

我假设我的错误直接与 -moz-transition 相关,因为 :hover 状态有效,但不是过渡。我已经从 w3 school 复制了转换代码,所以我知道这不是错误的,但是我的 Firefox 正确地触发了在互联网上找到的 css 转换,所以我知道这不是我的浏览器有问题。这一定是我忽略的一些基本问题。

有任何想法吗?

4

1 回答 1

2

CSS3 规范background-image不能动画。Chrome 中的background-image转换是非标准的。

于 2012-10-11T19:59:57.307 回答