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

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/

As of right now, the fiddle seems to work in Chrome 31. – Patrick Nov 14 '13 at 18:38 — Patrick, Nov 14 '13 at 18:38

thednp · Answer 1 · 2017-09-18T18:38:12.877

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.

edited Sep 18 '17 at 18:38

answered Jun 17 '14 at 19:28

thednp

4,401
4
33
45

hey, funny, and youre right. it works in webkit, though. – commonpike Dec 14 '14 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: http://stackoverflow.com/a/23386830/1816603 – Jose Gómez May 12 '16 at 03:14
Well, my solution is cross-browser, at least with any modern browser HTML5, IE9+. – thednp May 12 '16 at 12:54

Brett Pontarelli · Accepted Answer · 2017-12-06T23:45:09.587

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;

edited Dec 06 '17 at 23:45

answered Jan 20 '12 at 21:08

Brett Pontarelli

1,718
15
29

The prefixes were there in his original question and his fiddles. I'm not sure why he removed them. – BoltClock Jan 20 '12 at 21:12
1

don't forget `-ms-transition:` (for IE10 coming up) – JayC Jan 20 '12 at 21:14
Thanks. I guess animating background-size is only supported in firefox – HandiworkNYC.com Jan 20 '12 at 21:42
@JayC It's added and thanks for the heads up. – Brett Pontarelli Jan 20 '12 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-`. – Brett Pontarelli Jan 25 '12 at 23:11
I've seen better results using `background` (without -size) as the property. – sweeds Oct 02 '14 at 05:02

score 17 · Answer 3 · answered Jan 10 '17 at 00:06

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

answered Jan 10 '17 at 00:06

Jess

171
1
2

2

Yes this is true. Even setting `background-size: cover` on the div won't work. It must be a numerical value – Yashas Apr 29 '20 at 04:07

score 8 · Answer 4 · answered Feb 23 '12 at 21:01

8

You just need to change:

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

to:

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

answered Feb 23 '12 at 21:01

Greg

756
8
16

Creamov · Answer 5 · 2015-08-05T19:20:42.150

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

K. Bert · Answer 6 · 2017-11-02T18:52:48.627

-1

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

-webkit-transition: all 1s;
transition: all 1s;

edited Nov 02 '17 at 18:52

answered Nov 02 '17 at 18:21

K. Bert

144
1
1
7

Well this was a browser support issue, not about the syntax, even though your answer should work, it's not really specific enough – Paul Ghiran Nov 02 '17 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 02 '17 at 18:55

score -1 · Answer 7 · edited Nov 19 '16 at 17:22

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

edited Nov 19 '16 at 17:22

Angel Politis

10,955
14
48
66

answered Jan 20 '12 at 20:54

fordareh

2,923
2
26
39

thanks fordareh, but that still does not produce any animation – HandiworkNYC.com Jan 20 '12 at 20:57

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

7 Answers7

Linked