CSS transition from `display: none` on class change?

Question

I\'ve started using transitions to \"modernise\" the feel of a site. So far, :hover transitions are working great. Now I\'m wondering if it\'s possible to trigg

Answer 1

It is possible to animate show and hide elements in css, just instead of:

display: none;

/* and */

display: block;

use:

overflow: hidden;
max-height: 0;

/* and */

max-height: 9999999px;

Since you replace this properties, you are able to animate any css value with transition.

working example: https://jsfiddle.net/utyja8qx/