La transizione dei colori CSS non funziona su: hover - html5, css3, colors, css-transitions

Un'altra domanda con l'utilizzo di CSS.

Mi piacerebbe che l'intestazione del colore di sfondo passasse dalla corrente ad un'altra quando si passa il mouse (a causa di più siti con colori diversi).

ho fatto un CSS-transizione animazione per questo, ma non sembra funzionare. Che cosa sto facendo di sbagliato?

        #header
{
background-color: #3cff9c;
float: left;
text-align: center;
width: 100%;
}

#header:hover
{
/*Animation*/
-webkit-animation: colorChange_blue 1s; /* Safari, Chrome, Opera*/
-moz-animation: colorChange_blue 1s; /*Firefox*/
animation: colorChange_blue 1s; /*Standard*/

/*Safari, Chrome, Opera*/
@-webkit-keyframes colorChange_blue
{
from
{background-color;}
to
{background-color: #008c74;}
}

/*Firefox*/
@-moz-keyframes colorChange_blue
{
from
{background-color: currentColor;}
to
{background-color: #008c74;}
}

/*Standard*/
@keyframes colorChange_blue
{
from
{background-color: currentColor;}
to
{background-color: #008c74;}
}
}

risposte:

che ne dici di risolverlo senza i fotogrammi chiave e solo il passaggio del mouse standard con le transizioni?

#header {
height: 50px;
width: 100px;
background-color: #3cff9c;
transition: background-color 1s;
}

#header:hover {
background-color: #008c74;
}

<div id="header"></div>