css - (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;

        }
      }
    }

有任何想法吗？

标签： cssanimationsasshovertransition