CSS-Farbübergang funktioniert nicht: hover - html5, css3, colors, css-transitions

Eine andere Frage bei der Verwendung von CSS.

Ich möchte, dass die Hintergrundfarbe des Headers beim Schweben von der aktuellen Farbe in eine andere übergeht (aufgrund mehrerer Websites mit unterschiedlichen Farben).

Ich machte einen CSS-Übergangsanimation dafür, aber es scheint nicht zu funktionieren. Was mache ich falsch?

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

Antworten:

Wie wäre es, wenn Sie das Problem ohne Keyframes lösen und einfach mit Übergängen über den Mauszeiger fahren?

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

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

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