背景大小转换在Chrome中不起作用

Question

我正试图过渡background-size和background-color.

• Chrome:background-size无效转换
• Firefox:两者都运行良好

我也创造了一个小提琴.

.highlight {
  display: block;
  position: relative;
  /*min-height: 800px;*/
  min-height: 200px;
  background-position: center center;
  background-repeat: no-repeat;
  /*padding-top: 200px;*/
  padding-top: 80px;
  /*background-size: cover;*/
}
.highlight:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .25);
  content: "";
}
.highlight {
  position: relative;
  height: 200px;
  cursor: pointer;
  background-size: auto 110%;
  background-position: center center;
  -moz-transition: background-size 3s ease;
  -webkit-transition: background-size 3s ease;
  transition: background-size 3s ease;
}
.highlight:hover {
  background-size: auto 130%;
  background-color: rgba(0, 0, 0, 0.4);
  -moz-transition: background-size 3s ease;
  -webkit-transition: background-size 3s ease;
  transition: background-size 3s ease;
}
.highlight:before {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  -moz-transition: background-color 3s ease;
  -webkit-transition: background-color 3s ease;
  transition: background-color 3s ease;
}
.highlight:hover:before {
  background-color: rgba(0, 0, 0, 0.8);
  -moz-transition: background-color 3s ease;
  -webkit-transition: background-color 3s ease;
  transition: background-color 3s ease;
}

<div class="highlight" style="background-image:url(http://cdn2.stillgalaxy.com/ori/2015/06/06/female-doctors-stock-photos-2331433563559.jpg);">
</div>

有人帮我这个吗？或者可以认为这是在促成这些过渡？

谢谢

Answer 1

这是为什么不工作的原因是background-size不能设置动画(或者至少不应该)使用关键字时,例如cover,contain或auto.

MDN进一步解释:

动画:是的,作为一个可重复的列表,一个简单的列表,长度,百分比或calc(); 当两个值都是长度时,它们被插值为长度; 当两个值都是百分比时,它们被插值为百分比; 否则,两个值都被转换为calc()函数,该函数是长度和百分比之和(每个可能为零),并且这些calc()函数将每一半内插为实数.这意味着关键字值不可动画.

因此,将原始/最终值调整为实际数字(或更准确地引用的长度),您将解决此问题.