Why does css transition occur upon revealing an element, but doesn't upon hiding?

Why does css transition occur upon revealing an element, but doesn't upon
hiding?

Long story short - check the question title :)
I'm working on a nav for my project, and recently I've encountered a
strange error. Here's a little background:
I want some custom animated hide/reveal behavior implemented, so simply
using jQuery 1.10 show() and hide() methods won't suffice: I'm toggling a
class on the element in question.
The class I toggle is called .hidden. It's used along with the class
.toReveal to avoid having to set overflow:hidden; to each of the items I
want revealed. I've also mentioned I'm going for animated hide/reveal
behavior, so I'll provide the relevant CSS:
*{-webkit-transition:0.3s all;-moz-transition:0.3s all;}
.hidden, .hidden * {
padding-top:0 !important;
padding-bottom:0 !important;
margin-top:0 !important;
margin-bottom:0 !important;
height:0 !important;
border-top-width:0 !important;
border-bottom-width:0 !important;
}
.toReveal, .toReveal * { overflow:hidden; height:auto; }
So the experience I get is rather strange: when I expand the hidden
element - the transition is going as planned. But when I try to hide the
element - the transition doesn't happen.
I've found little traces of what's actually causing the trouble: if I
remove height:0 !important; line from the code - the transition does
happen, but the element doesn't collapse, while collapsing is the whole
point of this :)
Here's a jsFiddle to the simplified prototype: http://jsfiddle.net/KCAHe/
Steps to see the desired behavior:
Click on dev/local
Advanced button will appear: click on sandbox
Steps to reproduce the issue:
Click on dev/local Keep clicking on Advanced