I'm wondering if this could be done without the extra images by a more complex keyframes. Set all of them to z-index:2; When it finishes going off-screen, set it to a z-index of 1 and then translate it back +500%;

You'd need a unique keyframes for each (I think) but it would mean no duplicate content in the markup.

Also be nice to see an example that doesn't vomit all over the markup with endless pointless classes for nothing.

I might have to play with this. If I do I'll make my own article and back-link to yours.

Though since such animations are usually fluff and not content, I'd be half tempted to combine all the images down to a single one (saving some handshakes) and assign them as a repeating background-image. Then all the animation would need to do is change background-position.