[英]When background image scaled, it starts to flicker in Chrome
我有一個帶有背景圖像的div。 當它具有簡單的變換比例動畫時,它開始在谷歌Chrome和Opera中閃爍。 這是一個簡單的例子:
http://codepen.io/anon/pen/bWpNYq
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並獲得更好結果的解決方案。
你知道如何使它與背景圖像平滑嗎?
試試這個:添加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;
}
嘿,也許你可以試試這個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>
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屬性“transition”並在body click上開始轉換。
只需使用css,方式更好。 如果你打開你的檢查器,你會看到你的tweenlite代碼用這段代碼非常快地設置/更新div的style屬性: transform: translate3d(0px, 0px, 0px) scale(1.00212, 1.00212);
。 這是JS計算的東西,然后告訴CSS做什么(非常基本的解釋)。 CSS可以自己做這件事。 你為什么要堅持使用你的GSAP引擎?
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.