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

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

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

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

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

解决方法

你的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);
        -ms-transform: translate3d(0,0);
         -o-transform: translate3d(0,0);
            transform: translate3d(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);
}

这是实时链接：http://jsfiddle.net/PqdVZ/1/