How to animate display table to none or zero height?

I am trying to animate a header, when the class collapseTest is added to the header. Came up with the following: http://ift.tt/1fPObZ9 Thanks to @Hackerman for helping me out with the working one.

What I want is, when the class collapseTest is added to the header, the white div with the class top is disappear. Since I use display table instead of block I can't hide the div including the content with the css rule display: none. The content does not disappear.

I use the following animation, that is working for a display block, but not for table.

@-webkit-keyframes pushDown {
    0% {
        height: 50%;
        display: table;
    }
    100% {
        height: 0;
        display: none;
    }
}

I call this one on the div with the class top. Like this:

#header.collapse .top {
    -webkit-animation: pushDown 2s forwards linear;
}

But this isn't working as aspect. Does anyone know what I am doing wrong, why the div with the class top isn't animating to hidden?