javascript - 缩放背景图像时，它开始在 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

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