Firefox 转换不起作用（具有声明的初始值）答案

【问题标题】：Firefox transition not working (with declared initial values)Firefox 转换不起作用（具有声明的初始值）
【发布时间】：2014-10-09 18:14:06
【问题描述】：

以下过渡动画适用于除 Firefox 之外的所有浏览器。我知道您必须初始化要在 Firefox 中转换的属性。在这种情况下，动画、边框、字母间距和背景这三个属性被明确声明了默认值。

>a {
    text-align: center;
    padding: 10px 0;
    display: block;
    color: white;
    width: 100%;
    -webkit-transition: border .5s, letter-spacing .2s, background .5s;
    -moz-transition: border .5s, letter-spacing .2s, background .5s;
    -ms-transition: border .5s, letter-spacing .2s, background .5s;
    -o-transition: border .5s, letter-spacing .2s, background .5s;
    transition: border .5s, letter-spacing .2s, background .5s;
    background: transparent;
    letter-spacing: 1px;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}
>a:hover {
    background: blue;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    letter-spacing: 2px;
}

There's a working fiddle here

子菜单元素是过渡动画适用于除 Firefox (v.31 OS X) 之外的所有设备的元素。

（对于小提琴中冗长而神秘的 CSS，我深表歉意，我使用的是 SASS。我已将 CSS 的相关部分注释为：

/*
   TWISTED TRANSITION
*/

帮助你找到它）

编辑：

看到 Fabio 的评论，我想知道其他人是否可以给我留下评论，如果它对他们有用。我开始怀疑这不是 OS X FireFox 的故障。

【问题讨论】：

在 FF 中非常适合我，不知道你是什么意思
@Fabio 悬停效果在 FF 中适用于我，但它不是动画的。这是一个即时的变化，就好像没有设置transition: 参数一样。例如，在 Chrome 中，我得到了漂亮而平滑的过渡效果。可能是我的版本和我的操作系统，FF 31 OS X。同时清除了缓存，甚至重新启动了我的笔记本电脑，问题肯定仍然存在。我也很困惑为什么父菜单的过渡动画效果很好。

标签： css firefox transition css-animations

【解决方案1】：

只需设置 li 的样式，而不是 a

header nav > .ul_wrap > ul > li > ul > li {
text-align: center;
padding: 10px 0;
display: block;
color: white;
width: 100%;

transition: all 5s ease-in-out;
background: transparent;
letter-spacing: 1px;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
}
header nav > .ul_wrap > ul > li > ul > li:hover {
background: #3b4979;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
border-top: 1px solid rgba(255, 255, 255, 0.4);
letter-spacing: 2px;
-webkit-box-shadow: #273565 0 0 2px 1px inset;
-moz-box-shadow: #273565 0 0 2px 1px inset;
box-shadow: #273565 0 0 2px 1px inset;
}
header nav > .ul_wrap > ul > li > ul > li > a{color:#fff}

我在 FF 中尝试过，效果很好。 see fiddle

【讨论】：

太棒了，谢谢！仍然对为什么 a 在这种情况下不会动画感到困惑，但至少它可以工作！