背景大小的封面使css3动画波涛汹涌

我有一个图像的网格，我想用css3顶部动画。它工作，直到我把背景大小：封面上网。动画变得波涛汹涌。我做错了什么，或者我能做些什么来防止这种情况发生？背景大小的封面使css3动画波涛汹涌

当我使用jQuery的动画功能，它变得更糟。

我还发现类似于： -webkit-backface-visibility：hidden; 但这并不能解决问题。

body{ 
    overflow: hidden; 
    margin: 0; 
    padding: 0; 
    background: #ccc; 
} 

div.container.animate{ 
    top:-100%; 
} 
div.container{ 
    position: absolute; 
    right: 0; 
    bottom: 0; 
    top: 0; 
    left: 0; 
    -webkit-transition: top 1s ease-in-out; 
    -moz-transition: top 1s ease-in-out; 
    -o-transition: top 1s ease-in-out; 
    -ms-transition: top 1s ease-in-out; 
    transition: top 1s ease-in-out; 

} 

ul{ 
    display: block; 
    padding: 0; 
    margin: 0; 
} 

li{ 
    width: 25%;; 
    float: left; 
    height: 160px; 
    background-size: cover; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
}

来源

2013-05-13 Atticweb

什么计算机您使用的？你在哪个浏览器中测试过它？这可能是一个计算机性能问题。对我来说它工作得很好，但我有一台功能强大的机器。看看这个也是：http://stackoverflow.com/questions/8600635/jquery-animations-choppy-after-using-css3-transitions – Tbi45 2013-05-13 09:48:04

我有一个非常强大的电脑，我使用铬。我确实看到这个例子比实际的网站更流畅。也许是因为真实的网站是全屏。但是，当我删除背景大小规则时，我确实看到了差异。 – Atticweb 2013-05-13 09:53:08

我仍然认为存在性能问题。动画将重新定位每个图像的每个像素。所以这对于浏览器渲染会有点沉重，更不用说如果你说原始变体是全屏的话，图像就很大。看到这个问题也许它有帮助（遵循性能问题）。 http://stackoverflow.com/questions/7866423/css3-animations-and-performance-are-there-any-benchmarks。 – Tbi45 2013-05-13 10:05:32

没有什么不对您的JavaScript中，存在的问题奠定了在CSS。顶部，右侧，底部和左侧的动画是硬件加速的。这很糟糕，因为它可以在CPU上运行，而不是在GPU上运行。当你看到一个生涩的转换时，你可以打赌你不是硬件加速的。所以，你应该使用硬件加速。

而不是动画的顶部，你应该动画变换（x，y，z）。这将使硬件加速。

所以你必须改变下面的CSS：

div.container.animate{ 
    top:-100%; 
} 

div.container{ 
    position: absolute; 
    right: 0; 
    bottom: 0; 
    top: 0; 
    left: 0; 
    -webkit-transition: top 1s ease-in-out; 
    -moz-transition: top 1s ease-in-out; 
    -o-transition: top 1s ease-in-out; 
    -ms-transition: top 1s ease-in-out; 
    transition: top 1s ease-in-out; 
}

进入这个：

div.container{ 
    float: left; 
    width: 100%; 
    height: 100%; 

    -webkit-transform: translate3d(0, 0%, 0); 
     -moz-transform: translate3d(0, 0%, 0); 
     -ms-transform: translate3d(0, 0%, 0); 
     -o-transform: translate3d(0, 0%, 0); 
      transform: translate3d(0, 0%, 0); 

    -webkit-transition: all 1s ease-in-out; 
     -moz-transition: all 1s ease-in-out; 
     -o-transition: all 1s ease-in-out; 
     -ms-transition: all 1s ease-in-out; 
      transition: all 1s ease-in-out; 
} 

div.container.animate{ 
    -webkit-transform: translate3d(0, -100%, 0); 
     -moz-transform: translate3d(0, -100%, 0); 
     -ms-transform: translate3d(0, -100%, 0); 
     -o-transform: translate3d(0, -100%, 0); 
      transform: translate3d(0, -100%, 0); 
}

这里是活链接：http://jsfiddle.net/PqdVZ/1/

来源

2013-05-13 10:37:33

背景大小的封面使css3动画波涛汹涌

回答

相关问题