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

前端之家收集整理的这篇文章主要介绍了Webkit中的css3背景大小过渡动画不起作用…… Bug?还是错误的语法?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
动画背景大小属性似乎不适用于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/

解决方法

您应该检查浏览器版本以及它是否支持后台大小和转换.如果是前者,而不是后者使用:
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;

猜你在找的CSS相关文章