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

Question

在Chrome或Safari中，似乎无法通过动画效果来改变background-size属性。

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/

- HandiworkNYC.com

---

截至目前，琴弦似乎在Chrome 31中可以使用。 - Patrick

Answer 1

您应该检查浏览器版本以及其是否支持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;

- Brett Pontarelli

---

前缀在他的原始问题和他的代码示例中都有。我不确定为什么他把它们删除了。 - BoltClock

不要忘记添加-ms-transition:（为即将到来的IE10） - JayC

谢谢。我猜测在Firefox中只支持动画背景大小。 - HandiworkNYC.com

@JayC 已添加，感谢提醒。 - Brett Pontarelli

@j-man86：你说“我猜测在Firefox中只支持动画背景大小”是什么意思？请注意，在您的帖子和fiddle中，应该使用“-webkit-”，而不是“-web-kit-”。 - Brett Pontarelli

我发现使用background（不带-size）作为属性可以获得更好的结果。 - sweeds

Answer 2

它的支持范围不是很广。查看完整的支持过渡效果的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);
}

这样就可以了。

- thednp

---

嘿，很有趣，你是对的。虽然它在Webkit中有效。 - commonpike

实际上，该规范似乎不是最新的。background-size至少在Firefox中支持动画效果。更多细节请参考：https://dev59.com/mmAg5IYBdhLWcg3wnMC3#23386830 - Jose Gómez

我的解决方案是跨浏览器的，至少在任何现代浏览器HTML5、IE9+上都可以使用。 - thednp

Answer 3

你需要在 div 元素上设置 background-size，否则它没有一个固定的尺寸可以执行动画。

.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%; 
}

- Jess

---

是的，这是正确的。即使在 div 上设置 background-size: cover 也不起作用。它必须是一个数值。 - Yashas

Answer 4

您只需要更改：

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

to:

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

- Greg

Answer 5

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

此外，在使用供应商前缀的属性后，应编写原始CSS属性（这非常重要）。否则，如果浏览器已实现该CSS3属性（如transition），则原始属性将被带有供应商前缀的属性替换-这是不好的。

错误的顺序：

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

正确的顺序：

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

- Creamov

Answer 6

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

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

- K. Bert

---

这是一个浏览器支持问题，而不是语法问题，即使您的答案应该有效，但并不够具体。 - Paul Ghiran

我知道这并不具体，但这是一种从未让我失望的选择。 - K. Bert

Answer 7

您也可以将所有的过渡声明更改为以下方式（不是背景而是背景大小在变化）：

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

- fordareh

---

谢谢fordareh，但这仍然没有产生任何动画。 - HandiworkNYC.com