30

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/

1
  • 4
    As of right now, the fiddle seems to work in Chrome 31.
    – Patrick
    Nov 14, 2013 at 18:38

7 Answers 7

23

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;
6
  • The prefixes were there in his original question and his fiddles. I'm not sure why he removed them.
    – BoltClock
    Jan 20, 2012 at 21:12
  • 1
    don't forget -ms-transition: (for IE10 coming up)
    – JayC
    Jan 20, 2012 at 21:14
  • Thanks. I guess animating background-size is only supported in firefox Jan 20, 2012 at 21:42
  • @JayC It's added and thanks for the heads up. Jan 20, 2012 at 22:13
  • 1
    @j-man86: What do you mean you "guess animating background-size is only supported in firefox"? Note that in you post and fiddle you have -web-kit- which should be -webkit-. Jan 25, 2012 at 23:11
23

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.

3
  • hey, funny, and youre right. it works in webkit, though.
    – commonpike
    Dec 14, 2014 at 17:09
  • 1
    Actually, that specification doesn't seem to be up to date. background-size does support animation, at least in Firefox. More detail: stackoverflow.com/a/23386830/1816603 May 12, 2016 at 3:14
  • Well, my solution is cross-browser, at least with any modern browser HTML5, IE9+.
    – thednp
    May 12, 2016 at 12:54
17

you need to set the background-size on the div otherwise it dosn't have a set size to animate from.

.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%; 
}
1
  • 3
    Yes this is true. Even setting background-size: cover on the div won't work. It must be a numerical value
    – Yashas
    Apr 29, 2020 at 4:07
8

You just need to change:

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

to:

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

Change -web-kit- to -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.

WRONG order:

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

RIGHT order:

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

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;
1
  • thanks fordareh, but that still does not produce any animation Jan 20, 2012 at 20:57
-1

I know this is a old question, but using "all" works fine for me.

-webkit-transition: all 1s;
transition: all 1s;
2
  • Well this was a browser support issue, not about the syntax, even though your answer should work, it's not really specific enough Nov 2, 2017 at 18:48
  • 2
    I know that is not specific at all but it's an alternative that never let me down .
    – K. Bert
    Nov 2, 2017 at 18:55

Not the answer you're looking for? Browse other questions tagged or ask your own question.