html - 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