background-size cover makes css3 animation choppy

Question

I have a grid of images that i want to animate to the top with css3. It works until i put Background-size: cover onto the grid. The animation becomes choppy. What am i doing wrong, or what can i do to prevent this?

When i use jquery's animation function it becomes even worse.

I also found something like: -webkit-backface-visibility:hidden; but this does not do the trick.

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

Answer 1

There is nothing wrong with your javascript, the problems lays in the CSS. Animating top, right, bottom and left is hardware accelerated. This is bad because it will run on your CPU and not on your GPU. When you see a jerky transition then you can bet that you are not hardware accelerating. So instead you should use hardware acceleration.

Instead of animating the top, you should animate the transform(x, y, z). This will will make it hardware accelerated.

So you have to change the following 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;
}

Into this:

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

Here is the live link: http://jsfiddle.net/PqdVZ/1/