2012-12-10 55 views
1

我试图让我的悬停过渡在opera和firefox中工作。它在Chrome中运行正常,但我没有在IE或Safari中验证它。我需要更改还是添加?用于Firefox,Opera和IE的CSS转换?

#redbox a { 
    -webkit-transition-property: all; 
    -webkit-transition-duration: 0.15s; 
    -webkit-transition-timing-function: linear; 
    -webkit-transition-delay: initial; 
} 

#redbox a:hover {background:#6C6C6C;} 
+0

另请参见[是否Internet Explorer支持CSS转换?](http://stackoverflow.com/questions/5103283/does-internet-explorer-support-css-transitions) –

+1

有关Opera请参阅http://www.opera .com/docs/specs/presto2.12/css/transitions /#anima –

回答

1

你只是为了在你的CSS WebKit的前缀,所以它因此在Chrome中工作正常,而且极有可能Safari浏览器为好,但没有任何其他地方。你需要包括Mozilla的供应商名称得到它在Firefox的工作:

#redbox a { 
    -webkit-transition-property: all; 
    -webkit-transition-duration: 0.15s; 
    -webkit-transition-timing-function: linear; 
    -webkit-transition-delay: initial; 
    -moz-transition-property: all; 
    -moz-transition-duration: 0.15s; 
    -moz-transition-timing-function: linear; 
    -moz-transition-delay: initial; 
} 

也是一样的,它使用-o-作为其前缀歌剧。至于IE,如果不知道它支持CSS转换,你需要检查在MDNcaniuse

更新:由于@BoltClock及以下@Boris Zbarsky指出,它往往是一个好主意以包括这些特定于供应商的规则的非前缀标准版本,具体取决于您想要定位的浏览器/版本。

+1

IE10支持前置前缀。在任何稳定的版本中不会使用-ms-'前缀,但IE10 PP使用它。 – BoltClock

+0

不适用于Firefox。 – Erik

+1

Firefox 16和更新版本也支持这些没有前缀的属性。 –

相关问题