Css 慢开汉堡菜单

我一直在努力让我的汉堡菜单慢慢打开。我花了很长时间才创作出来谁能告诉我这个CSS代码是否允许它逐渐打开

---

UPD：CSS无法实现元素从无变为块时的平滑显示。JQuery为此提供了一些函数，并且。slideToggle更适合下拉，因为它将元素的高度从0更改为其自然高度。在括号中，您可以添加动画速度，“慢”等于600毫秒，也可以使用以毫秒为单位的时间：$'.responsive menu'。slideToggle500

CSS不能从display:none逐渐更改为diplay:block。将jquery与函数切换一起使用，请解释您的答案是如何解决问题的，它将帮助每个人更清楚地理解您的解决方案，以供将来参考。@Aziz编辑了我的答案

@media only screen and (max-width: 700px) {
    body {
        background-color: #white;
    }
    img {max-width: 100%; padding-bottom: 10px;
    }
    h1 {
        font-size: 30px;
    }


.wrapper {
    border: 0px;
    padding: 1px;
    background-color: white;
}
    .content {
        background-color: white;
        border: none;
        margin-left: 100px;
        margin-right: 100px;
    }

    .menu-btn div{
         float: left;
         padding-right: 0px;
         margin-top: 0em;
         line-height: 1.2;
         font-size: 18px;
         font-weight: 200;
         vertical-align: middle;
         z-index: 99;
    }

    .menu-btn span {
         display: block;
         width: 25px;
         height: 4px;
         margin-bottom: 5px;
         background: rgb(0,0,0);
         z-index: 99;
    }

        .menu-btn span:last-of-type {
            margin-bottom: 0;
        }

    .responsive-menu{
         display: none;
         overflow: hidden;
    }

    .responsive-menu ul {
          width: 80px;
          float: left;
          margin-right: 0;
          margin: 0;
    }

    .main-nav {
        border: none;
    }

    a {
        font-size: 10px;
        color: white;
    }

    .responsive-menu li {
        padding-left: 5px;
        font-size: 10px;
          line-height: 25px;
          list-style-type: none;
          background-color: black;  
    }

    .expand {
        display: block !important; 
    }

$( '.menu-btn' ).click(function(){
    $('.responsive-menu').slideToggle('slow');
});