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解决方案感兴趣。

Answer 1

而是动画height，尽量动画transform: translateY()如下（你会得到一个真正的滑动效果）：

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