Question

我有一个图像网格，我想用css3动画到顶部。它工作，直到我把背景大小：封面放在网格上。动画变得不稳定。我做错了什么，或者我该怎样做才能防止这种情况发生？

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

我还发现了类似的东西： -webkit-背面能见度：隐藏; 但这并没有成功。

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

Answer 1

你的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/

背景大小的封面让css3动画起伏不定

1 个答案: