(scss, css) переход, анимация, не работает

У меня проблема с переходом в scss:

.menu {

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

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

С переходом он вообще не работает, просто .list,

когда я использовал ключевые кадры и анимацию, у него было только два шага 0 и 100% без анимации между этими двумя точками.

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

        }
      }
    }

Любые идеи?