[SOLUCIONADO] Efecto de cambio de fondo

[mbm150]

Hola a todos! Tengo un pequeño problema que no consigo solucionar. El caso es que he hecho esto y no consigo que el efecto de fondo vaya lento, cambia sin hacer la transicion.

Código CSS:

#lateral #menuPrincipal ul li{
        padding:10px;
        background:#002f00;
        background:-webkit-gradient(linear, left top, left bottom, from(#004800), to(#020));
        background:-moz-linear-gradient(top, #004800 20%, #020 100%);
        background:-o-linear-gradient(top, #004800 20%, #020 100%);
        background:-ms-linear-gradient(top, #004800 20%, #020 100%);
        text-align:center;
        position:relative;
        color:#fff;
        -webkit-transition:all 0.3s linear;
        -moz-transition:all 0.3s linear;
        -o-transition:all 0.3s linear;
        -ms-transition:all 0.3s linear;
    }
    
    #lateral #menuPrincipal ul li:hover, #lateral #menuPrincipal ul .activo{
        background:#B1FF64;
        box-shadow:0px 0px 5px #002f00 inset;
        color:#002f00;
    }
 

El efecto del box-shadow lo hace, y el color de letra tambien, el que no funciona es el color de fondo, que se hace transparente y despues aparece el color.

Muchas gracias.

[Lobito14]

Supongo que en estas 4 lineas puedes modificar la velocidad de la transición:

Código CSS:

-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
-ms-transition:all 0.3s linear;
 

En vez de ponerlo a 0.3s ponle algo mas 1s o así y vas probando.

Saludos.

[pzin]

El problema es que los degradados no pueden animarse de ese modo.

[mbm150]

Entonces como debo animarlo?

Gracias.

[pzin]

Se puede animar la posición del fondo y otras cosas, pero no se puede animar el cambio de color para degradados. Por lo menos aún no se puede.