Question

这是我的CSS：

#pays li{
list-style:none;
margin-left:44px;
display:block;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background:url('http://symbolset.com/images/paypal-logo.png') no-repeat;
transition:0.2s;
-moz-transition:0.2s;
-webkit-transition:0.2s;
-o-transition:0.2s;
background-size:300px 180px;
}
#pays li:hover{background:url('http://data-informed.com/wp-content/uploads/2012/10/PayPal_logo.svg-crop-300x180.png') no-repeat}
#paypal{width:300px;height:180px}

这是full code in jsfiddle。它在Chrome中运行良好，所有其他浏览器都无法正常工作。

Answer 1

background-size在“CSS背景和边框模块级别3”的早期草案中无法制作动画。我想它还没有跨浏览器实现。但事实上it should be animatable as of the draft（“动画：除了关键字值以外是”）。

永远记住，背景和转换模块都还没有完成。 “CSS背景和边框级别3”处于“候选推荐”状态，“CSS转换”仅仅是“工作草案”。因此，您正在使用不稳定的技术，这些技术可能会受到进一步的改变不要相信Chromium已经实施了什么，它可能会改变。

CSS中的可动画属性列表：http://oli.jp/2010/css-animatable-properties/

CSS开发状态概述：http://www.w3.org/Style/CSS/current-work

Answer 2

由于背景图像变化的转换非常支持atm，因此您有两个选择：

使用imagesprite并为background-position设置动画
嵌入了另一个元素（遗憾的是你不能使用伪元素，动画也很难得到支持，atm）和动画不透明度

转换不适用于Firefox或Opera，只是chrome

2 个答案: