CSS 过渡仅适用于 Chrome答案

【问题标题】：CSS Transitions only working in ChromeCSS 过渡仅适用于 Chrome
【发布时间】：2013-01-28 00:55:00
【问题描述】：

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

http://jsfiddle.net/3tUAN/

如果必须的话，我可以求助于使用 jQuery（代码已经存在，IE9 已经需要），但如果可能的话，我希望它仅适用于 CSS。我考虑过尝试更具体地使用选择器（使用子选择器，例如 a.MenuLink > li.MenuItem > span.MenuTitle），但我希望社区可以在这方面帮助我。

【问题讨论】：

标签： html css animation

【解决方案1】：

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

span.MenuTitle {
    left: 0;
}

看到这个jsFiddle

【讨论】：

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