En primer lugar aquí está elviolín

Solo un menú desplegable de arranque normal, realicé algunos cambios en css para que el menú desplegable aparezca al pasar el mouse (en lugar de hacer clic), pero ¿cómo quiero una animación de desvanecimiento muy simple? Intenté la transición CSS pero no funcionó porque el elemento .dropdown-menu tiene un 'display: none' aplicado, al pasar el mouse cambia a 'display: block'. ¿Cómo puedo animar un elemento que cambia de 'diplay: none' a 'display: block' o hay algún otro método para lograrlo?

Ya busqué en Google esto y encontré alguna respuesta, pero no me ayudaron.

Código HTML:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

Código CSS:

.dropdown .dropdown-menu{
opacity: 0;
transition:         all 400ms ease;
-moz-transition:    all 400ms ease;
-webkit-transition: all 400ms ease;
-o-transition:      all 400ms ease;
-ms-transition:     all 400ms ease;
}
.dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
}