（scss，css）过渡，动画，不起作用

Question

我对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;

        }
      }
    }

有什么想法吗？