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>

El título (pasa el ratón por encima)

Ésta es la descripción (algo alargada por los propósitos de la demo). No deberías ver la transición
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam magna neque, pulvinar et hendrerit eu, fermentum eget velit. Pellentesque et aliquam libero. Aenean tincidunt odio a purus lobortis interdum. Fusce sed libero eget dui elementum commodo. Vivamus at mauris vitae libero sodales pretium sit amet a neque.

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>

El título (mantén el ratón por encima)

Ésta es la descripción (algo alargada por los propósitos de la demo). Deberías ver la transición
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam magna neque, pulvinar et hendrerit eu, fermentum eget velit. Pellentesque et aliquam libero. Aenean tincidunt odio a purus lobortis interdum. Fusce sed libero eget dui elementum commodo. Vivamus at mauris vitae libero sodales pretium sit amet a neque.

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 ;).