Html CSS转换仅在Chrome中工作

我创建了一个菜单，当您将鼠标悬停在链接上时，标题会从框架中滑出，不同的单词会滑入（客户端请求）。我只想在CSS中实现这一点，它在Chrome中的效果与预期完全一致，但在Firefox或Opera中则不然。只有第二个动画（不同的单词滑入）起作用，但主动画（正常单词滑出）没有应用其转换。下面是一个JSFIDLE示例：

---

如果必须的话，我可以求助于使用jQuery（代码就在那里，IE9已经需要了），但我只想在可能的情况下让它在CSS中工作。我曾考虑尝试使用选择器（使用子选择器，类似于

a.MenuLink>li.MenuItem>span.MenuTitle

），但我希望社区能在这方面帮助我。

您需要为

span.MenuTitle

指定

左
的初始值。这可能是其他浏览器中的一个bug，但它在Firefox中修复了它。大概是这样的：

span.MenuTitle {
    left: 0;
}

看这个
该死的，我完全错过了。我知道Firefox和Opera更加明确，需要声明X和Y位置，但我完全忘记了。谢谢你，8分钟后我可以勾选。