jQuery, la famosa librería de javascript, tiene una gran cantidad de animaciones para conseguir efectos visuales.

Muchas de ellas se pueden imitar con CSS y sus transiciones.

Pero hay un problema para efectuar una de las más famosas (slideToggle): los navegadores no nos dejan animar la propiedad height al valor auto (símplemente no mostrarán la animación).

Ejemplo:

Nótese que no funcionará. Para clarificar no he usado prefijos en las transiciones.

<style>
	.description {
		height: 0; /*Le damos una altura igual a 0*/
		overflow: hidden; /*Evitamos que se vea*/
		transition: height .7s; /*Recuerda usar los prefijos*/
	}
	.toggle:hover + .description {
		height: auto;
	}
</style>
<h3 class="toggle">El título (pasa el ratón por encima)</h3>
<p class="description">Ésta es la descripción</p>

La solución: usar max-height

Si usas un max-height: 0 para ocultarlo, y lo animas a uno lo suficientemente grande para que no tenga condflictos, el elemento no se expandirá más de lo necesario

<style>
	.description {
		max-height: 0;
		overflow: hidden;
		transition: max-height 1.2s;
		/*Tened en cuenta que es el tiempo que tardará en animar a los 400px*/
	}
	.toggle:hover + .description {
		max-height: 400px; /*En este caso valdrá con eso, en otros puede variar*/
	}
</style>
<h3 class="toggle">El título (mantén el ratón por encima)</h3>
<p class="description">Ésta es la descripción</p>

Uso práctico

Recientemente lo usé para estilizar un buscador personalizado (para mostrar un párrafo de texto cuando pasas el ratón por encima del título), pero seguro que se os ocurren mejores formas de usarlo ;).