css关键帧动画动态高度

您好，我的子菜单有以下 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解决方案感兴趣。

而不是动画height，尝试动画化transform: translateY()如下（你将得到真正的滑动效果）：

@keyframes slideDown{
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}