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

它没有得到广泛支持。查看支持转换here的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%; 
}

Answer 5

将-web-kit-更改为-webkit-。

此外，您应该在具有vendor-prefix的属性之后编写原始CSS属性（这非常重要）。否则，如果浏览器实现了CSS3属性（如transition），那么原始属性将被带有vendor-prefix的属性替换 - 这并不好。

错误的订单：

transition: ...;
-webkit-transition: ...;

正确的订单：

-webkit-transition: ...;
transition: ...;

Answer 6

您也可以将所有转换声明更改为这样（它不是背景，而是背景大小正在改变：

transition: background-size .4s ease-in-out;

Answer 7

我知道这是一个老问题，但使用“all”对我来说很好。

-webkit-transition: all 1s;
transition: all 1s;

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

7 个答案: