CSS transition on an initially hidden elemement

Question

I would like to make a css transition on an element which has display: none set. Consider the following code:

Answer 1

There are several css properties that cannot be incremented in small steps (what is the value of display 25% of the way between none and block?), particularly those that have non numeric values. The workaround you are describing is pretty much the standard way of dealing with this. jQuery, for example, uses something similar in its fadeIn and fadeOut methods.

If you want to animate the transition from taking up no space to standard layout, you can transition the height and width properties.