高度过渡不工作CSS

Question

我的代码很简单，但我没能得到一个过渡是如何工作的，以及它是如何不在我的HTML上工作的:

<div id="footer">
    <div id="footer1">
        <p> This should be a footer </p>
    </div>
</div>

和我的CSS

        #footer {
        position: fixed;
        bottom: 0;
        background-color: black;
        min-width: 100%;
        font-family: Agency FB;
        transition: width 3s;
    }
    #footer1 {
        text-align: center;
        color: #4e4e4e;
    }
    #footer:hover {
        opacity: .8;
        color: white;
        height: 100px;
    }

我看不出我的代码有什么问题。要么就是我还没有经验。谢谢!

Answer 1

试试这个

#footer {
    position: fixed;
    bottom: 0;
    background-color: black;
    min-width: 100%;
    font-family: Agency FB;
    transition: height 3s;
    height: 50px;
}
#footer1 {
    text-align: center;
    color: #4e4e4e;
}
#footer:hover {
    opacity: .8;
    color: white;
    height: 100px;
}

如果不行请告诉我

Answer 2

  #footer {
        position: absolute;
        bottom:0;
        background-color: black;
        min-width: 100%;
        height:50px;
        font-family: Agency FB;
        transition: width 3s, height 1s, transform 1s;
    }
    #footer1 {
        text-align: center;
        color: #4e4e4e;
    }
    #footer:hover {
        opacity: .8;
        color: white;
        height: 100px;
    }

<div id="footer">
    <div id="footer1">
        <p> This should be a footer </p>
    </div>
</div>

修改一下transition: width 3s, height 1s, transform 1s;

的值

干杯!