ciao.
Ho una serie di menu con la classe bootstrap drop-menu.
Bootstrap si occupa penso tramite js di rendere visibile/invisibile l'elemento associando la proprieta css display:none o display: block al drop down in modo da nasconderlo / renderlo visibile all hover.
Il mio problema è che vorrei poter usare le proprietà css traslation e transform (per le animazioni) ma la mia animazione del dropdown funziona solo la prima volta dopo ha un display:block sul dropdown che mi tronca l'animazione e il dropdown appare subito senza animazione.
E' una domanda un po generica e la sintetizzerei con utilizzare le animazioni css con bootstrap.
posto la parte css
codice:
#nav li.drop-menu  ul{
   z-index: -1;
pointer-events: none;
width: auto;
min-width: 280px;
text-align: left;
margin: 0;
padding: 25px 0;
-webkit-transition: height 2s cubic-bezier(0.2,1,0.3,1),opacity .6s cubic-bezier(0.2,1,0.3,1),box-shadow .6s cubic-bezier(0.2,1,0.3,1),top .4s cubic-bezier(0.2,1,0.3,1);
transition: height 2s cubic-bezier(0.2,1,0.3,1),opacity .6s cubic-bezier(0.2,1,0.3,1),box-shadow .6s cubic-bezier(0.2,1,0.3,1),top .4s cubic-bezier(0.2,1,0.3,1);
position: absolute;
display: block;
background-color: rgba(255,255,255,0.95);
left: -20px;
top: calc(120px - 25px);
overflow: hidden;
z-index: -1;
opacity: 0;
box-shadow: 0 5px 18px 0 rgba(0,0,0,0.05);
height:0px;

}
#nav li.drop-menu:hover  ul
{
   pointer-events: all;
height: 500px;
opacity: 1;
visibility:visible;
position:absolute;
left:-232px;                             /* CHROME, SAFARI */
-moz-transform:translateX(232px);       /* FIREFOX */
}

grazie .