Ayuda con animación CSS3

B

Estoy tratando de crear un slideUp de un div utilizando únicamente CSS3. Con jQuery es muy fácil usando el toggle() pero necesito que sea únicamente con CSS3 porque un tío me ha dicho que para aplicaciones Phonegap no es recomendable usar animaciones jQuery, que utilice mejor CSS3.

Bueno, pues más o menos lo tengo encarrilado pero no consigo hacer desaparecer parte de la caja a la que quiero hacer el slide.

http://jsfiddle.net/u2FKM/698/

No sé tampoco si la forma que estoy usando es la correcta así que estoy abierto a nuevos enfoques si este camino que llevo no es el correcto.

He buscado mucho por stackoverflow pero todos los ejemplos no son como yo quiero. Necesito que ese div se mueva de abajo arriba. No que el contenido se vaya descubriendo de abajo arriba, que es distinto.

Otra cosa a destacar, es que la caja a la que hago slide puede tener altura variable.
Además, aunque yo se lo haya aplicado a un footer me gustaría que se lo pudiera hacer a cualquier elemento que tenga en la página sin importar que esté pegado al borde la pantalla del dispositivo.

Saludos y gracias de antemano!

Usuarios habituales