Question

我想慢慢平滑地放大图像。图像是元素上的背景图像。除谷歌浏览器外，它在所有浏览器中都可以正常运行。特别是当它变慢时，它会震动。

我使用了一个转换，我使用background-size：100％100％;在0％和背景大小：150％150％;在100％，过渡需要30秒。

在这里，我做了一点小提琴来更好地解释它。只需在Firefox和Chrome中检查此项，您就会看到我的问题。有办法解决吗？

.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

 String Expected_Offer =  vars.get("Expected_Offer");

.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);
    }
}

背景图像缩放与css3过渡，摇晃铬

1 个答案: