具有过渡的背景大小属性不适用于 png

Question

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

这是小提琴，请检查一下。图像在过渡时间后会变大，但不会动画化。为什么会这样。

我在这里从一个重复的问题中使用这些：

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

使用 background-image 而不是 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>

工作小提琴

Answer 2

我已经用更干净的代码解决了你的问题

工作小提琴

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>