CSS 背景图像尺寸过渡

我正在研究一个简单的标记，可以调整 div 背景图像的大小。 看小提琴：

http://jsfiddle.net/zeYZL/ http://jsfiddle.net/zeYZL/

我需要使用简单的 CSS 过渡来为其设置动画。 我尝试这样做：

#tile:hover {
    background-size:550px 550px;
    background-position:-50px -50px;
    transition:all 0.5s ease;
    -webkit-transition:all 0.5s ease;
    -o-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;

}

但随后背景图像会在悬停时剪辑。 （看http://jsfiddle.net/5Hm9u/ http://jsfiddle.net/5Hm9u/)

有关如何修复它的任何提示？

问候，克里斯

JSFiddle http://jsfiddle.net/5Hm9u/1/

你需要把background以外的属性hover也因此它知道在不悬停时要返回到什么。

e.g.

.tile{
  float:left;
  margin:1px;
  width:450px;
  height:450px;
  overflow:hidden;
  background-size:450px 450px;
  background-position:0px 0px;
}

如果您希望它在鼠标悬停时进行转换，并且当您将鼠标移开时，请将转换打开.tile并不是.tile:hover

JSFiddle http://jsfiddle.net/5Hm9u/2/

边注

您应该避免在可以使用样式表的地方使用内联样式。 将您的背景图片放入.tile而不是使用style属性。

完整的CSS：

.tile{
  float:left;
  margin:1px;
  width:450px;
  height:450px;
  overflow:hidden;
  background-size:450px 450px;
  background-image:url(http://www.placehold.it/450x450);
  background-position:0px 0px;
  transition:all 0.5s ;
  -webkit-transition:all 0.5s ;
  -o-transition:all 0.5s ;
  -moz-transition:all 0.5s ;
}

.tile:hover {
  background-size:550px 550px;
  background-position:-50px -50px;
}