Size background cover makes css3 choppy animation

Question

I have a grid of images that I want to animate from above using css3. It works until I put on a Background-size: cover the grid. Animation becomes volatile. What am I doing wrong, or what can I do to prevent this?

When I use the jquery animation function, it gets even worse.

I also found something like: -webkit-opposite side-visibility: hidden; but it 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 are with CSS. Animation above, right, bottom and left - hardware acceleration. This is bad because it will work on your CPU, not on your GPU. When you see a jerky transition, you can bet you're not hardware acceleration. Therefore, you should use hardware acceleration instead.

Instead of animating the vertex, you should animate the transformation (x, y, z). This will speed up hardware acceleration.

So you need 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; } 

In it:

 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 direct link: http://jsfiddle.net/PqdVZ/1/