アニメーションはMicrosoft Edgeの高さをオーバーライドしません

Question

シンプルなフォームを設計しました。 Chrome、Opera、FFで正常に動作しています。しかし、エッジには問題があるようです。
私が行ったことは、サイズを0からautoに（サイズを変更する以外に）増加しているフォームにクラスを割り当てたことです。
しかしEdgeはこれをしていません。私はdevのツールで見たと高さを削除= 0;コードから、それはうまく動作し始めたが、それは私が望むものではない。
HTML：

<h1 style="text-align:center" id="heading">Form Design</h1> 
    <form action="" method="post" class="boxed" id="form"> 
     <h3 style="text-align:center; margin: 4% 0 9% 0;" id="greeting" 
     . 
     . 
     . 
     <button type="submit" name="submit" id="submit" class="btn btn- 
     outline-primary" style="font-weight: bold" disabled>Submit</button> 
     </div> 
    </form> 
    </div> 

CSS：

.boxed{ 
    background-color: rgba(0,0,0,0.3); 
    border: 2px solid var(--new); 
    width: 80%; 
    margin-top: 10px; 
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); 
    -webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); 

    /* animation-name: open; */ 
    animation-duration: 0.8s; 
    animation-fill-mode: forwards; 
    animation-timing-function: cubic-bezier(.68,.65,.37,1); 
    animation-delay: 0.3s; 

    height: 0; 
} 

@keyframes open { 
    0% {height:0; -webkit-transform: scaleY(0); transform: scaleY(0);} 
    100% {height:auto; -webkit-transform: scaleY(1); transform: scaleY(1);} 
} 

JS：

$(window).ready(function play(){ 
    $('.boxed').css('animation-name','open'); 
    $('.boxed').css('-webkit-animation-name','open'); 
    $('#bg').css('opacity','0.6'); 
    $('.boxed').on('webkitAnimationEnd oanimationend msAnimationEnd animationend',function(){ 
    $('#greeting').css('opacity','1'); 
    $('input.form-control, select').css('opacity','1'); 
    $('.btn').css('opacity','1'); 
    }); 
. 
. 
. 

今、アニメーションが実行中であることがわかりました。なぜなら、アニメーションが実行されているので、ここで何が問題なのですか？
こちらの記事をアップロードしました：https://iam-shivam.github.io/Form/index.html
Edgeと他のブラウザでサイトを実行しようとすると、その違いがわかります！代わりにanimationを使用しての

Answer 1

、CSSスタイルを適用するクラスを追加するためにJavascriptを使用し、CSS3はいくつかの既知の問題と例を示しています

$(window).ready(function(){ 
 
    $(".box").addClass("open"); 
 
});

.box { 
 
    border: 2px solid black; 
 
    background: seagreen; 
 
    transition: width .4s ease 0s, height .8s ease .4s; 
 
    height: 0; 
 
    width: 0; 
 
    overflow: hidden; 
 
    transform: translate(-50%,-50%); 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
} 
 

 
.box.open { 
 
    width: 500px; 
 
    height: 500px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
 

 
<div class="box"></div>