背景画像が縮尺されると、Chromeでちらつきが始まります。

Question

divに背景画像があります。単純な変換スケールのアニメーションを持つと、Google ChromeとOperaでちらつきが始まります。 は簡単なexmpleです：

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を拡大するソリューションが必要です。

背景イメージで滑らかにする方法はありますか？

Answer 1

これを試してみてください。 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; 
} 

Answer 2

多分あなたはこの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>

Answer 3

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プロパティ "トランジション" を使用し、身体のクリックで移行を開始します。

Answer 4

ちょうど良いCSSを使用してください。あなたのインスペクタを開くとtweenliteコードがdivのスタイル属性を非常に高速に設定/更新していることがわかります：transform: translate3d(0px, 0px, 0px) scale(1.00212, 1.00212);。 これは何かを計算してから、CSSに何をすべきかを伝える（非常に基本的な説明です）。 CSSはこれを独自の方法で行うことができます。なぜGSAPエンジンにこだわりたいのですか？