为什么这个CSS悬停转换在FireFox中失败?

时间:2012-09-30 06:50:23

标签: css firefox css3 css-transitions

我在这里发布了一个简单的例子: http://jsfiddle.net/tkJgg/

我知道FF需要为过渡属性设置初始值。我想我有这个。任何想法有什么不对?

3 个答案:

答案 0 :(得分:0)

使用此

-moz-transition: all 0.5s ease-in-out;

DEMO

答案 1 :(得分:0)

删除最后的0

 -moz-transition: all 0.5s ease;

或在零后指定s(秒):

-moz-transition: all 0.5s ease 0s;

语法说:

 <single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>

这里定义了<time>

time

CSS数据类型表示以秒或毫秒表示的时间维度。它们由<number>紧跟在单元后面。

而且:

虽然<length>允许无单位零,但对所有其他单位无效。

答案 2 :(得分:0)

Mozilla中的悬停转换不会失败,但有时由于代码错误或加载失败,浏览器会禁用此属性。 要忽略此问题,您应该在CSS转换中定义浏览器。以下是在定义不同主浏览器时应使用哪个代码的示例

#mydiv a:hover{
   -moz-transition:all 0.5s ease-in-out;     /*For Mozilla Browser*/ 
   -webkit-transition:all 0.5s ease-in-out;  /*For Chrome and Safari*/
   -o-transition:all 0.5s ease-in-out;       /*For Opera Browser*/
    transition:all 0.5s ease-in-out;         /*For Other Browser*/
}