Firefox 转换不起作用。这是一个错误吗？答案

【问题标题】：Firefox transition is not working. Is this a bug?Firefox 转换不起作用。这是一个错误吗？
【发布时间】：2013-01-31 11:19:22
【问题描述】：

我有一个仅适用于 chrome 的简单图像交换过渡。代码：

<a class="twitter" href="index.php"></a>

.twitter {
    width:26px;
    height:26px;
    display:block;
    background:transparent url('../images/twitter.jpg') center top no-repeat;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
    }

.twitter:hover {background-image: url('../images/twitter-hover.jpg');}

演示：http://jsfiddle.net/gWKEQ/17/

【问题讨论】：

你想重现什么样的背景图像转换？一个小提琴来证明它会加快速度。
将 transition: all 0.3s linear; 置于所有其他浏览器特定的过渡之上，然后重试。
它不起作用。这是示例jsfiddle.net/gWKEQ/17

标签： css firefox transitions

【解决方案1】：

这是因为只有 Chrome 真正支持为 background-image CSS 属性设置动画 - 根据 the spec，这实际上是不正确的，它被标记为：

背景图片

动画：无

有关您可以制作动画的更多信息（以及在哪些浏览器等中），请查看this page。将来，其他浏览器有望允许为 background-image 属性设置动画（并且规范将会改变），因为这是程序员/设计师真正想要的。

【讨论】：