Firefox转换不起作用(声明初始值)

Question

除了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;
}

这里有个有用的小提琴

子菜单元素是除了Firefox (v.31 OS )之外的所有转换anim工作的元素。

(我为小提琴里的长而神秘的CSS道歉，我用的是SASS。我对CSS的相关部分进行了评论：

/*
   TWISTED TRANSITION
*/

帮助你找到它)

编辑：

看到法比奥的评论，我想知道其他人是否能给我留下一条评论，这是否适合他们。我开始怀疑这是不是OS的小故障。

Answer 1

只需把李的风格改为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里试过了，效果很好。见小提琴