背景大小的封面使 css3 动画不连贯答案

【问题标题】：background-size cover makes css3 animation choppy背景大小的封面使 css3 动画不连贯
【发布时间】：2013-05-13 18:37:33
【问题描述】：

我有一个图像网格，我想用 css3 动画到顶部。它一直有效，直到我将 Background-size: 覆盖到网格上。动画变得断断续续。我做错了什么，或者我能做些什么来防止这种情况发生？

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

我还发现了类似的东西： -webkit-backface-visibility：隐藏；但这并不能解决问题。

示例： http://jsfiddle.net/PqdVZ/

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;
}

【问题讨论】：

你用的是什么电脑？你在什么浏览器中测试过它？可能是电脑性能问题。对我来说它工作得很好，但我有一台强大的机器。也看看这个：stackoverflow.com/questions/8600635/…
我有一台非常强大的电脑，我使用的是 chrome。我确实看到该示例比实际网站更流畅。也许是因为真正的网站是全屏的。但是当我删除背景大小规则时，我确实看到了差异。
我仍然认为存在性能问题。动画将从每个图像中重新定位每个像素。所以浏览器渲染会有点重，更不用说如果你说原始变体是全屏的，图像很大。也看到这个问题也许它有帮助（遵循性能问题）。 stackoverflow.com/questions/7866423/….

标签： css css-transitions

【解决方案1】：

您的 javascript 没有问题，问题在于 CSS。动画顶部、右侧、底部和左侧是硬件加速的。这很糟糕，因为它将在您的 CPU 上而不是在您的 GPU 上运行。当你看到一个不平稳的过渡时，你可以打赌你没有在硬件加速。因此，您应该使用硬件加速。

您应该为 transform(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/

【讨论】：