CSS color-transition 无法处理 :hover

Question

关于使用 CSS 的另一个问题。

我想让 header 的 background-color 在悬停时从当前状态过渡到另一个状态（由于多个站点具有不同的颜色）。

我为它做了一个CSS-transition-animation，但它似乎不起作用。我做错了什么？

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

Answer 1

如何在没有关键帧的情况下解决它，而只是标准的悬停和过渡？

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

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

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

CSS color-transition 无法处理 :hover

CSS color-transition not working on :hover

html

css

colors

css-transitions