css - 動的な高さをアニメーション化するCSSキーフレーム

Question

こんにちは、サブメニュー用に次の css があります。ページの読み込み時にサブメニューを開くために使用されます。うまく機能しますが、設定したアニメーションの終了状態でheight:auto;アニメーションが実行されていないことに気付きました私のサイトには n 個の子を持つサブメニューがたくさんあるので、サブメニューの高さを動的に設定する必要があるため、これは私にとって問題です。出来ますか ？

   @-moz-keyframes slidemenu {
        0% {
            height: 0px;
        }
        100% {
            height: 90px;
        }
    }

    @-webkit-keyframes slidemenu {
        0% {
            height: 0px;
        }
        100% {
            height: 90px;
        }
    }

    #side-menu > li.active > ul.sub-menu{
        -moz-animation-delay:0.5s;
        -moz-animation-name: slidemenu;
        -moz-animation-timing-function: ease-out;
        -moz-animation-duration: 0.5s;
        -moz-animation-iteration-count: 1;
        -moz-animation-fill-mode: forwards;

        -webkit-animation-delay:0.5s;
        -webkit-animation-name: slidemenu;
        -webkit-animation-timing-function: ease-out;
        -webkit-animation-duration: 0.5s;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-fill-mode: forwards;
    }

PS: 純粋な CSS ソリューションに興味があります。