當背景圖像縮放時，它開始在Chrome中閃爍

我有一個背景圖像的div。當它具有簡單的變換比例動畫時，它會開始在Google Chrome和Opera中閃爍。下面是一個簡單exmple：當背景圖像縮放時，它開始在Chrome中閃爍

CSS：

body { 
    height: 100vh; 
    overflow: hidden 
} 

div { 
    width: 100%; 
    height: 100%; 
    background-color: #f00; 
    background-position: 50% 50%; 
    background-image: url(".....jpg"); 
    background-size: cover; 
}

腳本：

TweenLite.set('div', { 
    backfaceVisibility: 'hidden', 
    perspective: 1000 
}); 
TweenLite.fromTo('div', 10, { 
    scale: 1.1 
}, { 
    scale: 1 
});

當圖像是一個簡單的img元素，同等規模的動畫作品的罰款。的過渡是平滑的：

http://codepen.io/anon/pen/pPyvdp

中的示例使用GASP爲動畫。我需要一個使用GSAP來擴展div的解決方案，效果更好。

你知道如何使背景圖像平滑嗎？

來源

2017-04-20 Roland Soós

試試這個： 加transition: all 1s linear;所以它比例順利。

body { 
    height: 100vh; 
    overflow: hidden 
} 

div { 
    width: 100%; 
    height: 100%; 
    background-position: 50% 50%; 
    background-image: url("https://smartslider3.com/wp-content/uploads/2015/10/slide52.jpg"); 
    background-size: cover; 
    transition: all 1s linear; 
}

來源

2017-04-20 12:17:52 LKG

我想堅持GSAP動畫引擎。 –

這確實與GSAP結合使用。 '1s'是過度殺傷性的，但在第一個演示中添加'transition：轉換爲0.1s linear';''讓我順利進行。根本問題可能是'background-size：cover'使得圖像縮放比例略有不同，這取決於'div'的縮放大小。添加轉換平滑了這一點。 –

嘿，也許你可以試試這個CSS動畫。爲了更好的瀏覽器的支持，加上

-webkit-animation 
-moz-animation 
-o-animation

body { 
 
    height: 100vh; 
 
    overflow: hidden 
 
} 
 

 
div { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-position: 50% 50%; 
 
    background-image: url("https://smartslider3.com/wp-content/uploads/2015/10/slide52.jpg"); 
 
    background-size: cover; 
 
    -webkit-animation: animate 5s forwards; 
 
animation: animate 5s forwards; 
 
} 
 

 
@-webkit-keyframes animate { 
 
    0% { transform: scale(1); } 
 
    100% { transform: scale(1.1); } 
 
} 
 

 
@keyframes animate { 
 
    0% { transform: scale(1); } 
 
    100% { transform: scale(1.1); } 
 
}

<div> 
 

 
</div>

來源

2017-04-20 12:19:55 RacoonOnMoon

CSS3允許你本地的過渡添加到您的轉換。嘗試使用下面的代碼：

document.body.addEventListener('click', function(){ 
 
    var div = document.getElementById('img'); 
 
    div.style.transform = 'scale(.5)'; 
 
})

body { 
 
    height: 100vh; 
 
    overflow: hidden 
 
} 
 

 
div { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-position: 50% 50%; 
 
    background-image: url("https://smartslider3.com/wp-content/uploads/2015/10/slide52.jpg"); 
 
    background-size: cover; 
 
    transition: transform 30s;  
 
}

<div id="img"></div>

它使用對機體點擊CSS屬性的「過渡」，並開始轉變。

來源

2017-04-20 12:20:32

但GSAP與img標籤一起使用相同的圖像時，我不明白爲什麼它更難以爲背景圖像製作動畫。 –

只是使用CSS，方式更好。如果你打開你的檢查員，你會發現你的tweenlite代碼用這段代碼非常快速地設置/更新div的style屬性：transform: translate3d(0px, 0px, 0px) scale(1.00212, 1.00212);。這是JS計算的東西，然後告訴CSS要做什麼（非常基本的解釋）。 CSS可以自己做到這一點。爲什麼你想堅持使用GSAP引擎？

來源

2017-04-20 12:27:37 SheperdOfFire

當背景圖像縮放時，它開始在Chrome中閃爍

回答

相關問題