CSS - Problema transition en height auto

<style>

#acordeon {

	width: 230px;

	margin:5px auto auto auto;

    align: Left;

}

#acordeon .item {

	width: 230px;

	overflow: hidden;

	color: #000000;

	height:15px;

	font-size:11px;

	font-family: helvetica;

	cursor: pointer;

	margin-bottom: 3px;

	text-align: center;

	vertical-align: middle;

	transition: height ease-in-out 500ms; /* css3 transition */

	-o-transition: height ease-in-out 500ms;

	-moz-transition: height ease-in-out 500ms;

	-webkit-transition: height ease-in-out 500ms;

	}

#acordeon .polo a {

	text-decoration:none; font-family: helvetica;

	font-size: 10px;

	text-aling: center;

	color:#ffffff;

	background: #87e0fd; /* Old browsers */

	background: -moz-linear-gradient(top,  #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* FF3.6+ */

	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0)); /* Chrome,Safari4+ */

	background: -webkit-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Chrome10+,Safari5.1+ */

	background: -o-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Opera 11.10+ */

	background: -ms-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* IE10+ */

	background: linear-gradient(to bottom,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* W3C */

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-9 */

	font-size:10px;

	cursor: pointer;

}

#acordeon .item a {

	text-decoration: none;

	border-radius: 10px;

	color:#000000;

	display: block;

	width:230px;

	height: 15px;

	vertical-align: middle;

	background: #99b6dd; /* Old browsers */

	background: -moz-linear-gradient(top,  #99b6dd 1%, #eff7fc 100%); /* FF3.6+ */

	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#99b6dd), color-stop(100%,#eff7fc)); /* Chrome,Safari4+ */

	background: -webkit-linear-gradient(top,  #99b6dd 1%,#eff7fc 100%); /* Chrome10+,Safari5.1+ */

	background: -o-linear-gradient(top,  #99b6dd 1%,#eff7fc 100%); /* Opera 11.10+ */

	background: -ms-linear-gradient(top,  #99b6dd 1%,#eff7fc 100%); /* IE10+ */

	background: linear-gradient(to bottom,  #99b6dd 1%,#eff7fc 100%); /* W3C */

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99b6dd', endColorstr='#eff7fc',GradientType=0 ); /* IE6-9 */

	margin-bottom:5px;

	transition: all .3s ease;

}

 .clearing{

      clear:both;

   }

#acordeon .item:hover{

	¡¡¡¡¡ EL PROBLEMA ES QUE ME PONE A TODA VELOCIDAD EL ALTO Y QUIERO QUE VAYA POCO A POCO ¡¡¡¡

                                         COMO LO PUEDO HACER PARA QUE VAYA LENTO??????????='/img/emoticons/smile.gif' width='22' height='22' border='0' />

    height:auto;

}

</style>

<?php

$Categoria1 = str_replace("-", " ",$_GET['Categoria1']);

$Categoria2 = str_replace("-", " ",$_GET['Categoria2']);

function left($string, $count){

   return substr($string, 0, $count);

 }

echo "<div id='acordeon'><div id='acordeon'>";

$Lis=mysql_query("SELECT Categoria1,Categoria2 from articulos group by Categoria1,Categoria2");

while($pro = mysql_fetch_array($Lis)) {

	if ($ulti==$pro['Categoria1'])

		{

			$z=$z+1;

			echo "<p style='height:17px; margin:0;'><a onmouseover='javascript: esperar(1)' style='text-decoration: none; border-radius: 10px; color:#000000; display: block; width:220px; height: 15px;	vertical-align: middle; background: #c1e9f5;' href='http://opix.es/tienda/".$pro['Categoria1']."/".$pro['Categoria2']."'>".left($pro['Categoria2'],30)."</a></p>";

		}

	else

		{

			$pus = 15*$z;

			$x = $x+1;

			echo "</div><div id'clearing'></div><div id='".$pus."' class='item'><a onmouseover='javascript: esperar(1)' href='http://opix.es/tienda/".$pro['Categoria1']."'>".$pro['Categoria1']."</a>";

		}

	$ulti=$pro['Categoria1'];

}