(scss, css) transition, animation, not working

Question

I have a problem with the transition in scss:

.menu {

  .list {
    height: 0;
    display: none;
  }

  &:hover {
    .list {
      display: block;
      height: auto;
      transition: all 5s ease-out;
    }
  }

With transition it not working at all just a .list,

when I used keyframes and animation it only have two steps 0 and 100% with out animation between these two points

@keyframes drop {
  0% {
    height: 0;
    display: none;
  }

  100% {
    display: block;
    height: auto;
  }
}

 .menu {

      .list {
        height: 0;
        display: none;
        list-style: none;
        position: absolute;
        padding: 5px;
        background: $bd1;
        top: 100px;
        left: 55px;
      }

      &:hover {
        .list {
          animation: drop 5s ease-out forwards;

        }
      }
    }

Any ideas?