使用css3過渡的背景圖像縮放，在鍍鉻中晃動

Question

我想慢慢平滑地放大圖像。 圖像是元素上的背景圖像。除谷歌瀏覽器之外，它在所有瀏覽器中均可正常運行。尤其是當它變慢時，震動。我使用的過渡，我使用背景大小：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%;"> 
 
\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>

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>