css3背景大小过渡动画Webkit不工作... Bug？还是错误的语法？ [英] css3 background-size transition animation in Webkit doesn't work... Bug? Or wrong syntax?

问题描述

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

动画处理background-size属性在Chrome或Safari中似乎无效。

Animating the background-size property doesn't seem to be working in Chrome or 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%;

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

}

div:hover {
    background-size: 100% 100%;
}

推荐答案

以及是否支持 background-size 和 transition 。如果前者，但不是后者使用：

You should check the browser version and whether it supports both background-size and transition. If the former, but not the latter use:

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;

这篇关于css3背景大小过渡动画Webkit不工作... Bug？还是错误的语法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！