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

Question

我有一个带有背景图像的 div。当它具有简单的变换比例动画时，它开始在 Google 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

只需使用 css，效果会更好。如果您打开检查器，您会看到您的 tweenlite 代码正在使用以下代码非常快速地设置/更新 div 的样式属性：transform: translate3d(0px, 0px, 0px) scale(1.00212, 1.00212);。 这是 JS 计算一些东西，然后告诉 CSS 做什么（非常基本的解释）。 CSS 可以自行完成。为什么你这么想坚持使用你的 GSAP 引擎？

Answer 2

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 点击时开始转换。

Answer 3

嘿，也许你可以试试这个 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 4

试试这个： 添加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;
}