Transición del color de fondo

Question

Estoy tratando de hacer un efecto de transición con el color de fondo cuando cierro los elementos del menú, pero no funciona. Aquí está mi código CSS:

#content #nav a:hover { 
    color: black; 
    background-color: #AD310B; 
    /* Firefox */ 
    -moz-transition: all 1s ease-in; 
    /* WebKit */ 
    -webkit-transition: all 1s ease-in; 
    /* Opera */ 
    -o-transition: all 1s ease-in; 
    /* Standard */ 
    transition: all 1s ease-in; 
} 

El div #nav es una lista de elementos de menú ul.

Answer 1

Hasta donde yo sé, las transiciones actualmente funcionan en Safari, Chrome, Firefox, Opera e Internet Explorer 10+.

Esto debería producir un efecto de fundido para usted en estos navegadores:

a { 
 
    background-color: #FF0; 
 
} 
 

 
a:hover { 
 
    background-color: #AD310B; 
 
    -webkit-transition: background-color 1000ms linear; 
 
    -ms-transition: background-color 1000ms linear; 
 
    transition: background-color 1000ms linear; 
 
}

<a>Navigation Link</a>

Nota: Como ha señalado Gerald en los comentarios, si se pone la transición en la a , en lugar de a:hover volverá al color original cuando el mouse se aleje del enlace.

Esto podría ser útil, también: CSS Fundamentals: CSS 3 Transitions

Answer 2

Para mí, es mejor poner los códigos de transición con los selectores originales/mínimos que con el: hover o cualquier otro selectores adicionales:

#content #nav a { 
 
    background-color: #FF0; 
 
    
 
    -webkit-transition: background-color 1000ms linear; 
 
    -moz-transition: background-color 1000ms linear; 
 
    -o-transition: background-color 1000ms linear; 
 
    -ms-transition: background-color 1000ms linear; 
 
    transition: background-color 1000ms linear; 
 
} 
 

 
#content #nav a:hover { 
 
    background-color: #AD310B; 
 
}

<div id="content"> 
 
    <div id="nav"> 
 
     <a href="#link1">Link 1</a> 
 
    </div> 
 
</div>