CSS Transitions僅適用於Chrome

Question

我創建了一個菜單，當您將鼠標懸停在鏈接上時，標題幻燈片會從框架中向左移動，並且不同的單詞會滑入（客戶端請求）。 我試圖僅在CSS中執行此操作，它在Chrome中完全按預期工作，但在Firefox或Opera中沒有。 只有第二個動畫（其中插入不同的單詞）才有效，但主動畫（普通單詞滑出的地方）沒有應用其過渡。 這是一個帶有示例的jsFiddle：

http://jsfiddle.net/3tUAN/

如果必須的話，我可以使用jQuery（代碼就在那里，IE9已經需要）但是如果可能的話我想讓它適用於CSS。 我已經考慮過嘗試使用選擇器更具體（使用子選擇器，比如a.MenuLink > li.MenuItem > span.MenuTitle ），但我希望社區能幫助我解決這個問題。

Answer 1

您需要為span.MenuTitle指定left的初始值。 這可能是其他瀏覽器中的錯誤，但它在Firefox中修復了它。 像這樣的東西：

span.MenuTitle {
    left: 0;
}

看到這個jsFiddle