Suavização na transição

Olá, tenho o seguinte código:

<style type="text/css">
#ntf
	{
 font-size:14px;
 font-weight:bold;color:#5497ae;
 border:1px solid #5497ae;text-shadow:0px 1px 0px #fef4c5;
 -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.5), inset 0px 1px 0px rgba(255,255,255,0.25);-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.5), inset 0px 1px 0px rgba(255,255,255,0.25);
 box-shadow:0px 1px 2px rgba(0,0,0,0.5), inset 0px 1px 0px rgba(255,255,255,0.25);
 -webkit-border-radius:4px;-khtml-border-radius:5px;
 -moz-border-radius:5px;border-radius:5px;
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#e9f6fd),color-stop(100%,#d3eefb));

	}
	#boxtitulo{
 text-align: left;
 margin-left: 10px;

	}
	#boxtexto{
 text-align: left;
 margin-left: 10px;

	}
	#fecharbox{
 background: #000;
 color: #fff;
 line-height: 20px;
 position: absolute;
 right: 10px;
 text-align: center;
 top: 20px;
 width: 24px;
 text-decoration: none;
 font-weight: bold;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
 -moz-box-shadow: 1px 1px 3px #000;
 -webkit-box-shadow: 1px 1px 3px #000;
 box-shadow: 1px 1px 3px #000;
 }
	#fecharbox:hover {
 background: #0a87c5;
	}

</style>

<div id="ntf"><a id="fecharbox" href="#" title="Fechar" onclick="document.getElementById('ntf').style.display='none';"> X </a>
<p id="boxtitulo">Titulo</p>
<p id="boxtexto">Texto</p>

 <br>
</div>

É uma notificação que ao clicar no X ela fecha, funciona tudo.

Só que eu quero acrescentar uma transição suave, fazendo a Div fecha suavemente. Porém eu quero esta transação seja por CSS, pois por jquery e java ele dá conflito com outros elementos do Web Site.

Então, qual código e onde adicionar para ter este efeito ? Sei que com CSS 3 é possível!