The reason why using jQuery or the CSS animation show little difference is because jQuery does exactly the same as your CSS: It moves things with left/right positioning, which isn't very effective as its not hardware accelerated, and in your example (Which is very image heavy and have a background-position changing constantly - the slider thingie) it hurts on the FPS.
Solution:
Make your animation use transform instead which forces hardware acceleration:
@-webkit-keyframes moveRight {
from {
-webkit-transform: translate3d(-1286px, 0,0);
}
to {
-webkit-transform: translate3d(107px, 0,0);
}
}
@-webkit-keyframes moveLeft {
from {
-webkit-transform: translate3d(107px, 0,0);
}
to {
-webkit-transform: translate3d(-1286px, 0,0);
}
}
It will give an significantly increase in the FPS - I did a little benchmark on your page with it comparing the left/right vs translate:
The right version where it peaks below 30fps sometimes is of course the Left/Right positioning. The transform method has a few below 30fps but it may well be some of all the other things going on on your page - like the auto scrolling and the image slider thingie.