为啥这个 CSS 悬停过渡在 FireFox 中失败？

Posted 2023-03-06

【中文标题】为啥这个 CSS 悬停过渡在 FireFox 中失败？

【英文标题】：Why does this CSS hover transition fail in FireFox?为什么这个 CSS 悬停过渡在 FireFox 中失败？

【发布时间】：2012-09-21 11:26:01

【问题描述】：

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

我知道 FF 需要为过渡属性设置初始值。我想我有。有什么想法吗？

【参考方案1】：

悬停过渡在 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*/

【讨论】：

你到底在说什么？

表示我们需要在CSS代码中定义浏览器。就像 Mozilla 中的 -moz- 一样，因此我已经定义了所有的浏览器代码。

【参考方案2】：

去掉末尾的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> 允许无单位零，但对所有其他单位无效。"

【讨论】：

是的 - 如果其他浏览器允许无单位时间值，它们就是错误的。

.. 不是真的，但如果你不遵守规范，你可能会有不同的行为

嗯，是的 - 希望他们在删除前缀时修复它。

我完全同意你的观点，那些前缀真的很糟糕。

【参考方案3】：

使用这个

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

DEMO

【讨论】：

我现在看到了问题。这不是“轻松”功能，而是0的延迟。FF想要像“0s”这样的东西才能工作。我测试过的其他浏览器并不关心。谢谢。