css key-frames animating dynamic height

Question

Hello I have the following css for my sub-menus.It is used in order to open them when the page loads.It works great, however I noticed that if at the end state of the animation I set height:auto; then the animation is not being executed.This is an issue for me because in my site I have many sub-menus with n amount of children in them so I must populate the height of the sub-menu dynamically. Is it possible ?

   @-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: I'm interested in a pure css solution.

Answer 1

Instead of animating height, try animating transform: translateY() as follows (you will get a true sliding effect):

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

Answer 2

@keyframes pageLoadSubnavDropdown {
    0% {
        max-height: 0px;
    }
    100% {
        max-height: 300px;
    }
}

This worked for me but there is still a guessing game as the max-height has to still be over what the max height of all the elements would be. The higher the second number the faster the animation travels no matter how many elements are in the dropdown.

This would be a good fix for a specific range of elements, not so much a fully dynamic range of elements.