CSS3 show and hide animation

mixins.scss

$veryBigWidth: 100rem;
$veryBigHeight: 100rem;

@mixin transition-hide {
	transition: opacity 0.5s ease;

	visibility: hidden;
	opacity: 0;
	max-height: 0;
	max-width: 0;
	overflow: hidden;
}

@mixin transition-show {
	transition: opacity 0.5s ease;

	visibility: visible;
	opacity: 1;
	max-height: $veryBigWidth;
	max-width: $veryBigHeight;
	overflow: visible;
}

change the variables as fits your design, modify the animation to your need.
following properties may be animated:

• max-height
• max-width
• opacity

in some cases (I dont know yet why!) you need to set position: absolute for this to work. It seems it depends on parent's position property though.