CSS transitions are an exciting development in the world of web development, but it’s still a work in progress. I wanted to have a content block appear and hide on a hover event with pure CSS and a nice animation. My first thought was to animate the display property from display: hidden to display: block, but you can’t set a transition on the display property. In fact, if between the begin and end state there is a change in the display property, no transitions will work at all.
Looking for the next best thing, I decided to set a transition on the height property. Unfortunately that didn’t work as intuitively as it sounds either. If you have a content block with a variable height, you’ll want to use height 100% for the expanded state, but currently the CSS3 transitions don’t work with auto / height 100%, only with a fixed height.
Work Around
I needed my variable content blocks to fully display, so setting a fixed height was out of the question. A workaround to this is to set a transition on max-height instead and set the height to 100%. You need to set the max-height for both states (both need to be fixed) and on the expanded state you also set height: 100%. Now we have a working transition, as shown here: Demo
Quirk #2
I was happy to find the workaround, but in my case the transition still wasn’t working. I was driving myself nuts. The transition was expanding nicely, but not collapsing properly back to the begin state. The cause? I had set the height property on the collapsed state and this was causing the transitions to hiccup (at least in Chrome). Removing the height property on the first state solved the matter. See what makes the difference in another live example: Demo Comparison
Another limitation
The max-height trick works but it’s not always convenient. You will have a problem if your content is larger than the maximum height that has been set. If you set a very large max-height to prevent this, it messes with the transition timing and the transition behaves less reliable – it gets worse the larger the difference between the actual height and the max-height.