Webkit中的css3背景大小过渡动画不起作用...... Bug？还是错误的语法？

Question

动画背景大小属性似乎不适用于Chrome或Safari.

div {
    width: 161px;
    height: 149px;
    background: url(http://3.bp.blogspot.com/_HGPPifzMEZU/Rw4ujF12G3I/AAAAAAAAAWI/bc1ppSb6eKA/s320/estrelas_09.gif) no-repeat center center;
    background-size: 50% 50%;
    transition: background-size 2s ease-in;
    -moz-transition: background-size 2s ease-in;
    -web-kit-transition: background-size 2s ease-in
}
div:hover {
    background-size: 100% 100%
}

<div>
hey
</div>

http://jsfiddle.net/ubcka/14/

Answer 1

它没有得到广泛支持.见支持过渡的CSS属性的完整列表在这里.我会有不同的方法.将您background-color想要转换的元素包裹起来,并为您的元素进行缩放转换.

<div class="your-wrapper">
  <div class="your-div">

  </div>   
</div>

还要确保添加适当的样式

.your-wrapper {
   overflow:hidden
}
.your-div {
   transition: transform 0.5s; 
   -webkit-transition: -webkit-transform 0.5s
}
.your-wrapper:hover .your-div{
   transform: scale(1.5); -webkit-transform: scale(1.5);
}

这应该做.

Answer 2

您应该检查浏览器版本以及它是否支持background-size和transition.如果是前者,而不是后者使用:

transition: background-size 2s ease-in;
-moz-transition: background-size 2s ease-in;
-ms-transition: background-size 2s ease-in;
-o-transition: background-size 2s ease-in;
-webkit-transition: background-size 2s ease-in;

Answer 3

你只需要改变:

-web-kit-transition: background-size 2s ease-in;

至:

-webkit-transition: background-size 2s ease-in;

Answer 4

你需要在div上设置背景大小,否则它没有设置动画的大小.

.div { 
 background-size: 100%; //set the original size!!!!!!!!!!!!
-webkit-transition: background-size 2s ease-in;
transition: background-size 2s ease-in;
}

.div:hover { 
 background-size: 110%; 
}