css3 background-size transition animation in Webkit doesn't work... Bug? Or wrong syntax? [closed]

Question

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

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-color you wanted to do transition to, and do a scale transition for your element.

<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.

Answer 2

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;