模态动画过渡

Question

这是我的html模式代码

<div class="modal">
    <div class="modal-body">
    </div>
</div>
<div class="modal-background"></div>

这是我的CSS

  modal {
    position: fixed;
    top: 53px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    overflow: auto;
    transition: opacity 0.4s, bottom 0.4s; 
    opacity: 1;      

    .modal-body {
      padding-left: 70px;
      background: #fff;
      border: 0;
      border-bottom-left-radius: 1rem;
      border-bottom-right-radius: 1rem;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    }
  }

  .modal-background {
    position: fixed;
    top: 55px;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000;
    opacity: 0.75;
    z-index: 900;
  }
}

body.modal-open {
  overflow: hidden;
}

我试图在打开模式时添加向下动画过渡，但是我不知道为什么这样不起作用，有人可以帮我吗？预先感谢