CSS Webkit 中的 css3 背景大小过渡动画不起作用......错误？还是语法错误？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8947683/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css3 background-size transition animation in Webkit doesn't work... Bug? Or wrong syntax?
提问by HandiworkNYC.com
Animating the background-size property doesn't seem to be working in Chrome or Safari.
动画 background-size 属性在 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>采纳答案by Brett Pontarelli
You should check the browser version and whether it supports both background-sizeand transition. If the former, but not the latter use:
您应该检查浏览器版本以及它是否同时支持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;
回答by thednp
It's not widely supported. See a complete list of CSS properties that support transition here. I would have a different approach. Wrap your element with background-coloryou wanted to do transition to, and do a scale transition for your element.
它没有得到广泛支持。在此处查看支持过渡的 CSS 属性的完整列表。我会有不同的方法。用background-color您想要过渡到的元素包裹您的元素，并为您的元素进行缩放过渡。
<div class="your-wrapper">
<div class="your-div">
</div>
</div>
also make sure to add proper styling
还要确保添加适当的样式
.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);
}
This should do.
这个应该可以。
回答by Jess
you need to set the background-size on the div otherwise it dosn't have a set size to animate from.
您需要在 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%;
}
回答by Greg
You just need to change:
你只需要改变：
-web-kit-transition: background-size 2s ease-in;
to:
到：
-webkit-transition: background-size 2s ease-in;
回答by Creamov
Change -web-kit-to -webkit-.
更改-web-kit-为-webkit-。
Also, you should write original CSS property after properties with a vendor-prefix (it's very important). Otherwise, if browser has implemented that CSS3 property (like transition), then original property will be replaced by property with vendor-prefix — and that is not good.
此外，您应该在带有供应商前缀的属性之后编写原始 CSS 属性（这非常重要）。否则，如果浏览器实现了 CSS3 属性（如transition），那么原始属性将被带有供应商前缀的属性替换——这并不好。
WRONG order:
错误的顺序：
transition: ...;
-webkit-transition: ...;
RIGHT order:
正确的顺序：
-webkit-transition: ...;
transition: ...;
回答by K. Bert
I know this is a old question, but using "all" works fine for me.
我知道这是一个老问题，但使用“全部”对我来说很好。
-webkit-transition: all 1s;
transition: all 1s;
回答by fordareh
You can also just change all the transition declarations to read like this (it's not the background but the background-size that is changing:
您也可以将所有转换声明更改为这样读取（不是背景而是背景大小正在改变：
transition: background-size .4s ease-in-out;
