CSS 过渡不起作用？答案

【问题标题】：CSS Transitions not working?CSS 过渡不起作用？
【发布时间】：2011-05-15 08:30:16
【问题描述】：

由于某种原因，我似乎无法让 css 转换工作。我确信这是一个非常简单的错误。但我已经把头撞在墙上一个小时了。我在 windows 7 64bit 上使用 mozilla firefox 4.0.1。

<style>
a:link {
 transition: color 1s ease-in-out;
 color: #fff;
 text-decoration: none;
 text-shadow: 1px 1px #000;
}

a:hover {
 color: #0072bc;
 text-decoration: none;
 text-shadow: 1px 1px #000;
}
</style>
<a href="#">test</a>

【问题讨论】：

如果您想了解更多信息，请查看我写的教程：css3.bradshawenterprises.com

标签： html css css-transitions

【解决方案1】：

css 过渡是实验性的，但在某些引擎中实现。您需要使用特定的属性：

-moz-transition /* for gecko based like firefox*/
-webkit-transition /* for  chrome safari ... */
-o-transition /* for opera*/

【讨论】：

请注意，实验性也意味着语法可能会发生变化。
我明白，我只是忘记了这是新的 CSS 属性之一，它仍然需要特定于浏览器的前缀。
当 IE10pp2 出现时，可能还有 -ms-transition。

【解决方案2】：

您需要使用-moz- 前缀，因为它还没有标准化。所以：

-moz-transition: color 1s ease-in-out;

【讨论】：

【解决方案3】：

这也可以用 jquery / jquery ui 来完成，所以我在这里的所有浏览器中都可以工作 =) http://docs.jquery.com/UI/Effects/ClassTransitions

【讨论】：

【解决方案4】：

您应该研究用于 CSS 创作的 SASS 框架。您不必担心实验性依赖，因为框架会为您处理所有这些。

【讨论】：