I used the -webkit- stuff and it doesn’t animate for some reason, even though the same code with -moz- prefix works in firefox.
The background is meant to slide down, then the background changes & the new animation should start. The new animation is the same, the background slides in, then slides down out of the box, then the new one comes in again.
The correct answer, given by @Gerben, was that you can’t mix % positions with pixel ‘px’ positions in the CSS3 animation. Even though it will work in FireFox, it won’t work in some other CSS3-animation-enabled browsers.