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

问题描述：

我有一个背景图像的div。当它具有简单的变换比例动画时，它会开始在Google Chrome和Opera中闪烁。下面是一个简单exmple：当背景图像缩放时，它开始在Chrome中闪烁

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的解决方案，效果更好。

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

答

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

我想坚持GSAP动画引擎。 –

这确实与GSAP结合使用。 '1s'是过度杀伤性的，但在第一个演示中添加'transition：转换为0.1s linear';''让我顺利进行。根本问题可能是'background-size：cover'使得图像缩放比例略有不同，这取决于'div'的缩放大小。添加转换平滑了这一点。 –

答

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

答

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属性的 “过渡”，并开始转变。

但GSAP与img标签一起使用相同的图像时，我不明白为什么它更难以为背景图像制作动画。 –

答

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

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

相关推荐