具有过渡的背景尺寸属性不适用于png

Question

https://jsfiddle.net/wa78ja4r/1/

Here's the fiddle please check this out. The image just get bigger after the transition time but doesn't animate. Why is that so.

I'm using these from a duplicate question here:

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;

Answer 1

Use background-image instead of background .

 .outer-disc { width: 130px; height: 130px; background-color: #3F51B5; margin: 0 auto; border-radius: 100%; overflow: hidden; } .inner-disc { margin: auto; margin-top: 15px; width: 100px; height: 100px; background-color: white; border-radius: 100%; } .inner-disc .icon { width: 64px; height: 64px; background-position: center center; background-repeat: no-repeat; background-size: 60px 60px; opacity: 0.8; 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; } .inner-disc .icon:hover { background-size: 70px; } .inner-disc .customer-support { background-image: url("http://placehold.it/350x150"); width: 100%; height: 100%; } 

 <li class="jstransitiononservices"> <div class='outer-disc'> <div class='inner-disc'> <div class='icon customer-support'></div> </div> </div> <div class="services-text"> <h3>Customer Support</h3> <h5>Incredibly Amazing</h5> </div> </li> 

Working Fiddle

Answer 2

I have fixed you the problem with a cleaner code

Working Fiddle

 div{ width: 130px; height: 130px; background:red; border-radius: 100px; border: 10px blue solid; background: url("http://umerjaved1.base.pk/img/customersupport.png") center center no-repeat; background-size: 70px 70px; transition: all 1s ease; } div:hover{ background-size: 80px 80px; } 

 <div></div>