当背景图像缩放时，它开始在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，更好。如果打开检查员，您会发现您的teenlite代码正在使用此代码非常快速地设置/更新DIV的样式属性：transform: translate3d(0px, 0px, 0px) scale(1.00212, 1.00212);。这是JS计算某些内容，然后告诉CSS该怎么做(非常基本的解释(。CSS可以自己做到这一点。您为什么要这么严重地坚持使用GSAP引擎？