Can't animate div when focusing on child button using css only-CodePudding

I keep having a problem where when I click on a button, it animates perfectly fine when focused, but when the parent div is supposed to animate, it simply jumps instead of animating smoothly, even though I added a 2s ease to it. No matter what I try, whether I change the code for .Banner to .MenuButton:focus > .Banner or anything else, it still doesn't work... Any help would be appreciated!.

The css is below:

/* CSS Document */
div {
    font-family: muli, "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}

body {
    margin: 0px;
    padding: 0px;
}

#title {
    color: white;
    margin-left: 50px;
    margin-top: 25px;
    margin-bottom: 10px;
    display: inline-block;
}

.MenuButton {
    float: right;
    height: 60px;
    width: 60px;
    left: calc(100% - 85px);
    top: 10px;
    background: #7eefd8;
    border-color: #43b9bd;
    border-width: 5px;
    border-radius: 50px;
    transition: all 2s ease;
    display: inline-block;
    position: absolute;
}

.MenuButton:focus {
    border-width: 0px;
    border-radius: 50px;
    height: calc(100vh - 100px);
    width: calc(100vw - 50px);
    left: 25px;
    top: 75px;
    
    transition: all 2s ease;
}

.TopBackground {
    background-color: #ffffff;
    width: 100%;
    height: 85vh;
    position: fixed;
}

.Banner {
    background-color: #000000;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    padding-bottom: 10px;
    width: 100%;
    display: inline-block;
    position: absolute;
    vertical-align: middle;
    transition: all 2s ease;
}

.Banner:focus-within {
    height: 100vh;
    transition: all 2s ease;
}

and html is below:

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="Theme.css">
<script src="MainPage.js"></script>
</head>
    <div >
        <div >
            <h1 id="title">BannerTest</h1>
            <button id="menu" ></button>
        </div>
        <div ></div>
    </div>
<body></body>

CodePudding user response：

When you do a transition, there is a before-transition state and after-transition state. Your before transition state .Banner does not have a fixed height value. You have to specify the exact height instead of auto or leaving it blank because the browser doesn't how to transition from point A: height auto to point B: height 100vh