Hogy lehet egyszerűen css-el megoldani, animált lenyíló szöveget?

Mondjuk ezt egy kicsit tovább bonyolítani:

<style>

#cont {display: none; }

.show:focus + .hide {display: inline; }

.show:focus + .hide + #cont {display: block;}

</style>

<div>

<a href="#show"class="show">[Show]</a>

<a href="#hide"class="hide">/ [Hide]</a>

<div id="cont">Content</div>

</div>