why does percentage unit in 'height' doesn't animate/transition (css)

Question

I have a problem cum question here. In the below code, I want to reveal the middle-card down with height going from 0% to 100%. But no matter if I use @keyframes or transition, setting height: whatever% doesn't animate/transition other than if I use another unit i.e. 348px. It jumps straight from 0% to 100% without any animation (even if I use 50% it goes to 100% without animations!).

I'm wondering why does it behave so?

I've only included the code related to middle-card in below snippet-

.cards-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 50px auto;
}

.card {
    flex: 0 0 300px;
    padding: 30px 3vw;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 15px #b3b5c633;
}

/* middle card */
.middle-card {
    background: linear-gradient(#a3a8f0, #696fdd);
    color: white;
    height: 0; opacity: 0;
    animation: reveal-down 1s 1s cubic-bezier(.68, -0.55, .27, 1.55) forwards;
}


/* hr */
.card hr {
    border-width: 2px 0 0;
    border-style: solid;
    border-color: #f3f3f33a;
}
/* Learn More */
.card a {
    display: inline-block;
    width: 100%;
    padding-top: 2vh;
    padding-bottom: 2vh;
    margin-top: 4vh;
    background: linear-gradient(#a3a8f0, #696fdd);
    font-size: 0.8em;
    text-transform: uppercase;
    color: white;
    letter-spacing: 2px;
    transition: all 1ms linear;
}
.middle-card a {
    background: white;
    color: #696fdd;
}

@keyframes reveal-down {
    to {
  height: 348.117px;
  opacity: 1;
    }
}

<div class="cards-container">
  <div class="card middle-card">
    <h3>Professional</h3>
    <h1 class="monthly" style="display: none">$24.99</h1>
    <h1 class="annually">$249.99</h1>
    <hr>
    <h4>1 TB Storage</h4>
    <hr>
    <h4>5 Users Allowed</h4>
    <hr>
    <h4>Send up to 10 GB</h4>
    <hr>
    <a>Learn More</a>
  </div>
</div>