Cómo animar la propiedad height de un elemento con CSS

La propiedad de altura (height) de un elemento no soporta la animación por CSS, pero existe un pequeño truco para poder lograr el efecto. Debemos usar la propiedad max-height para lograrlo, veamos un ejemplo sencillo

<div class="animame">
         Pasa el cursor por aca<br>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
        </div>

.animame{
          padding:10px;
          max-height:10px;
          transition: max-height 1s ease;
          overflow:hidden;
          border:1px solid;
        }
        .animame:hover{
          max-height:500px;
          transition: max-height 1s ease;
        }

Un ejemplo un poco más complejo, de como hacer un menú sobre un botón usando la misma técnica lo puedes ver a continuación en nuestro codepen

 

Ver ejemplo en codepen