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

Question

我有一个带有背景图像的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并获得更好结果的解决方案。

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

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属性“transition”并在body click上开始转换。

Answer 4

只需使用css，方式更好。 如果你打开你的检查器，你会看到你的tweenlite代码用这段代码非常快地设置/更新div的style属性： transform: translate3d(0px, 0px, 0px) scale(1.00212, 1.00212); 。 这是JS计算的东西，然后告诉CSS做什么（非常基本的解释）。 CSS可以自己做这件事。 你为什么要坚持使用你的GSAP引擎？