使用css3过渡的背景图像缩放，在镀铬中晃动

我想慢慢平滑地放大图像。图像是元素上的背景图像。除谷歌浏览器之外，它在所有浏览器中均可正常运行。尤其是当它变慢时，震动。我使用的过渡，我使用背景大小：100％100％;在0％和背景大小：150％150％;在100％，过渡需要30秒。使用css3过渡的背景图像缩放，在镀铬中晃动

在这里，我做了一个小提琴来解释它更好。只需在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%;"> 
 
\t \t \t \t <div class="content" style="margin-top: 150px"> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <a class="btn btn-photo" href="urlsomething" style="color: black; background-color: white;">Blabla <span class="btnArrow">&gt;<span></span></span></a> 
 
\t \t \t \t </div> 
 
\t \t \t </div>

来源

2017-09-28 maxkue

哪里是去拨弄的联系？ – Morpheus

[悬停时的背景大小转换导致chrome“晃动”背景图像]的可能重复（https://stackoverflow.com/questions/30218476/background-size-transition-on-hover-causes-chrome-to-shake -background-image） – Morpheus

在这样一个你需要使用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>

来源

2017-09-28 14:37:36 Creaforge

也可以使用':: after'伪元素而不是额外的div。 –

使用css3过渡的背景图像缩放，在镀铬中晃动

回答

相关问题