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

There's a working fiddle here

除了Firefox（第31版OS X）之外，子菜单元素是所有过渡动画的元素。

（我为小提琴中长而隐蔽的CSS道歉，我使用SASS。我已经评论了CSS的相关部分：

/*
   TWISTED TRANSITION
*/

帮助您找到它）

编辑：

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

Answer 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

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

1 个答案: