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

Question

我有一个仅适用于 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/

Answer 1

这是因为只有 Chrome 真正支持动画CSS 属性 - 根据规范background-image实际上是不正确的，它被注释为：

背景图片

动画：没有

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