CODEWITHSUNDEEP
css
0x_Anakin
0x_Anakin

Reputation: 3269

css key-frames animating dynamic height

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.

Upvotes: 9

Views: 32402

Answers (3)

kiotera
kiotera

Reputation: 1

I think this might work as well

#slide-menu {
    background: primary;
    height:100%;
    -webkit-animation: slideDown 3s;
}

//try to declare the keyframes after the #slide-menu
@keyframes slideDown {
    from {
      transform: translateY(-100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
}

you can change the background: primary to any color depends on what you want, example background: white

Upvotes: 0

Trevor Marshall
Trevor Marshall

Reputation: 21

@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.

Upvotes: 1

myajouri
myajouri

Reputation: 3114

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;
  }
}

Upvotes: 19

Related Questions