Javascript 当背景图像缩放时，它开始在Chrome中闪烁

我有一个有背景图像的div。当它有简单的变换比例动画时，它开始在谷歌浏览器和Opera中闪烁。 下面是一个简单的示例：

CSS:

脚本：

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

当图像是简单的img元素时，相同比例的动画效果良好。过渡是顺利的：

这些示例使用GASP进行动画。我需要一个解决方案，它使用GSAP来扩展div，以获得更好的结果

你知道如何使背景图像平滑吗？

试试这个： 添加

过渡：所有1s线性以便平滑缩放

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


正文{
高度：100vh；
溢出：隐藏
}
div{
宽度：100%；
身高：100%；
背景位置：50%50%；
背景图像：url（“https://smartslider3.com/wp-content/uploads/2015/10/slide52.jpg");
背景尺寸：封面；
-webkit动画：设置5s向前动画；
动画：设置5s向前的动画；
}
@-webkit关键帧动画{
0%{变换：比例（1）；}
100%{变换：比例（1.1）；}
}
@关键帧设置动画{
0%{变换：比例（1）；}
100%{变换：比例（1.1）；}
}
CSS3允许您将本机转换添加到转换中。请尝试使用以下代码：


document.body.addEventListener（'click'，function（））{
var div=document.getElementById（'img'）；
div.style.transform='scale（.5'）；
})
正文{
高度：100vh；
溢出：隐藏
}
div{
宽度：100%；
身高：100%；
背景位置：50%50%；
背景图像：url（“https://smartslider3.com/wp-content/uploads/2015/10/slide52.jpg");
背景尺寸：封面；
转换：转换30秒；
}
只需使用css，效果更好。如果打开inspector，您将看到tweenlite代码正在使用以下代码快速设置/更新div的style属性：
transform:translate3d（0px，0px，0px）scale（1.00212，1.00212）。
这是JS计算一些东西，然后告诉CSS做什么（非常基本的解释）。CSS可以自己完成这项工作。为什么你这么想坚持使用GSAP引擎？
我想坚持使用GSAP动画引擎。事实上，这与GSAP结合使用是可行的。
1s
是过度杀伤力，但添加了
transition:transform 0.1s线性
在您的第一个演示中让我感觉很顺利。潜在的问题可能是
背景大小：cover
使得图像的缩放略有不同，这取决于
div
的缩放大小。添加过渡可以消除这一点。但是当GSAP是一个img标记时，它可以处理相同的图像，我不明白为什么背景图像的动画制作会更困难。
-webkit-animation
-moz-animation
-o-animation