css - 同时转型和转型？

Question

我有一个与<div>一个background-image和一个height。100px我想让它在悬停时， div 将从 转换100px为300px。并且背景图像将过渡到1s两个属性的位置。

我的背景图像工作正常，当我将转换应用于 时height，<div>它可以工作，但背景图像停止工作；相反，它已经处于最终位置，没有过渡。

我能实现我想要做的事情吗？

Answer 1

这是我想出的答案http://jsfiddle.net/m7hHg/

div {
 background-image:url("http://www.whitegadget.com/attachments/pc-wallpapers/130360d1359002342-background-image-background-image-image-1024x768.jpg");/*Insert your image here*/
 width:100px;
 height:100px;
 -webkit-transition:all 1s;
 -moz-transition:all 1s;
 -o-transition:all 1s;
 -ms-transition:all 1s;
 transition:all 1s;
}
div:hover {
 background-position:-350px 0;
 width:300px;
 height:300px;
}

您的代码的问题是您只指定了过渡的背景位置。通过使用all而不是background-position，您告诉 CSS 说“如果通过 , 等更改样式，则hover使用active过渡更改每个样式。” 您只需指定是否只希望对一个属性进行动画处理