CSS Transitions仅适用于Chrome

Question

我创建了一个菜单，当您将鼠标悬停在链接上时，标题幻灯片会从框架中滑出，并且不同的单词会滑入（客户端请求）。我试图仅在CSS中执行此操作，它在Chrome中完全按预期工作，但在Firefox或Opera中没有。只有第二个动画（其中插入不同的单词）才有效，但主动画（普通单词滑出的地方）没有应用其过渡。这是一个带有示例的jsFiddle：

http://jsfiddle.net/3tUAN/

如果必须的话，我可以使用jQuery（代码就在那里，IE9已经需要）但我希望能够在适用于CSS的情况下使用jQuery。我曾考虑尝试使用选择器更具体（使用子选择器，如a.MenuLink > li.MenuItem > span.MenuTitle），但我希望社区可以帮助我解决这个问题。

Answer 1

您需要为left指定span.MenuTitle的初始值。这可能是其他浏览器中的错误，但它在Firefox中修复了它。像这样：

span.MenuTitle {
    left: 0;
}

请参阅此jsFiddle