Problem with transation when using AddClass and RemoveClass

Hi, I'm using jQuery so that when I do scroll a menu container decrease its heigth , width and hide the title. It works, but it does not make the transition that I have in CSS ...

HTML:

<ul id=list-menu>
<div class="container">
    <div class="col-md-10 col-md-offset-2">
        <li><a href="default.asp"><i class="fa fa-home fa-lg" aria-hidden="true"></i><span class="title-menu">Inicio</span></a></li>
        <li><a href="news.asp"><i class="fa fa-users fa-lg" aria-hidden="true"></i><span class="title-menu">Empleado</span></a></li>
        <li><a href="contact.asp"><i class="fa fa-calendar fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Citas</span></a></li>
        <li><a href="about.asp"><i class="fa fa-male fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Pacientes</span></a></li>
        <li><a href="about.asp"><i class="fa fa-eur fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Facturación</span></a></li>
        <li><a href="about.asp"><i class="fa fa-bar-chart fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Estadísticas</span></a></li>
        <li><a href="about.asp"><i class="fa fa-comments-o fa-lg" aria-hidden="true"></i><span class="title-menu"><span>Campañas</span></a></li>
    </div>
</div>
</ul>

CSS:

#list-menu{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: white;

   -ms-transition:     all 0.3s ease-out;
    -moz-transition:    all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -o-transition:      all 0.3s ease-out;
    transition:         all 0.3s ease-out;

}
#list-menu.down li{
    width: 90px;
    height: 38px;
}
#list-menu.down li a span{
    display:none;
}

jQuery:

$(window).on('load', function () {

$( "#container-wrapper" ).scroll(function() {
  if($('#container-wrapper').scrollTop() > 25){
    $('#list-menu').addClass('down');
  }else{
    $('#list-menu').removeClass('down');
  }

});
});