La transition de couleur CSS ne fonctionne pas sur: survol - html5, css3, couleurs, css-transitions

Une autre question à l'aide de CSS.

Je souhaite que la couleur d’arrière-plan de l’en-tête passe de son actuel à un autre lors du survol (en raison du fait que plusieurs sites ont des couleurs différentes).

J'ai fait un CSS-transition-animation pour cela, mais cela ne semble pas fonctionner. Qu'est-ce que je fais mal?

        #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;}
}
}

Réponses:

Que diriez-vous de le résoudre sans images clés et juste avec le survol standard avec des transitions?

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

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

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