带 css3 过渡的背景图像缩放，在 chrome 中抖动

Question

我想缓慢而平滑地放大图像。 图像是元素上的背景图像。它可以在除 Google Chrome 之外的所有浏览器中完美运行。尤其是慢的时候会晃动。

我使用背景大小的过渡：100% 100%;在 0% 和背景大小：150% 150%； 100%，过渡需要 30 秒。

在这里我做了一个小技巧来更好地解释它。 只需在 Firefox 中检查，然后在 Chrome 中检查，您就会看到我的问题。 有办法解决吗？

https://jsfiddle.net/xav8t479/4/

.highlight {
    display: block;
    position: relative;
    min-height: 520px;
    height: 800px;

}
@keyframes zoomin {
    0% {
      opacity: 0;

      background-size: 100% 100%;
     
    }
    5% {
      opacity: 1;
    }
    98% {
       
        animation-timing-function: ease-in;
        opacity: 1;
        
    }
    100% {
      
        opacity: 0;
        background-size: 150% 150%;
    }
}


.highlight {
  animation: zoomin 30s infinite;
}

<div class="highlight" style="background-image:url(http://www.eahealthsolutions.com/wp-content/uploads/2016/05/EA_Health_On_Call_Compensation_8916.jpg); background-position: 65% 50%;">
				<div class="content" style="margin-top: 150px">
					
					<a class="btn btn-photo" href="urlsomething" style="color: black; background-color: white;">Blabla <span class="btnArrow">&gt;<span></span></span></a>
				</div>
			</div>

Answer 1

在像这样的缓慢转换中，您需要使用 GPU 加速的 CSS 规则（转换）。

原因如下：

• 在图像插值方面确实更平滑
• CPU 密集度较低
• IE9 及以上版本支持
• 因为它只是摇滚

需要注意的是，您不能仅转换背景图像。这就是为什么在我的解决方案中我使用绝对定位的 div 并将溢出隐藏在父容器上。

这是updated version of your fiddle

.highlight {
  display: block;
  position: relative;
  height: 400px;
  border: 1px solid black;
  overflow: hidden;
  position: relative;
}

.content {
  min-height: 520px;
  height: 800px;
}

.animatedBackground{
  width: 100%;
  height: 100%;
  animation: zoomin 30s infinite;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

@keyframes zoomin {
    0% {
      opacity: 0;
      background-size: cover;
      transform: scale(1);
    }
    5% {
      opacity: 1;
    }
    98% {
        animation-timing-function: ease-in;
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

<div class="highlight">
  <div class="content">
    <a class="btn btn-photo" href="urlsomething" style="color: black; background-color: white;">Blabla <span class="btnArrow">&gt;</span></a>
  </div>
  <div class="animatedBackground" style="background-image:url(http://www.eahealthsolutions.com/wp-content/uploads/2016/05/EA_Health_On_Call_Compensation_8916.jpg);"></div>
</div>