Add X pixels to current position CSS

So, I'm trying to recreate a .gif I found online in pure CSS. However, I've run into a problem when creating the animation-part of this. Here's the GIF I'm trying to recreate:

As you can see, the source image breaks up in:

1. 3 walls
2. 9 columns
3. 27 cubes

And then returning by changing to 9 rows, 3 flats and a cube again.

I've measured everything in pixels and everything fits in the completely "exploded" state, but I can't seem to figure out how to animate it properly.

In this fiddle you can see I've managed to get to the 9 columns. However, when I try to animate to the 27 cubes (changing from styling columns to single cubes), I apply margin that also affect the cubes in the "columns-stage". See this fiddle

Note: Hover over the test area to trigger the animation!

Is there a way I can stage the margin (all the margin-tops from line 125) to occur on the moment they do in the 2nd fiddle, but not influence the blocks before the 2 second delay is actually taking place? I was thinking of saying margin-top should get X + 30px or something, but I can't seem to find something like that for CSS. Do I have to resort to jQuery? (I wanted to test how far I could get with CSS, so rather not!)

This is one of those pieces where a block is only getting its margin-top changed, the rest of the CSS and HTML can be found in the Fiddles (it is simply too much to copy/paste everything here):

#test-area:hover + #cube .block111, #test-area:hover + #cube .block121, #test-area:hover + #cube .block131 {
    margin-top: -30px;
    -webkit-transition-delay: 2s;
    transition-delay: 2s;
}