Помогите доработать код JS Анимации

// Переменные для окон
var modal = document.getElementById('myModal');

// Переменные для кнопок
var btn = document.getElementById("myBtn");
// Когда нажимаешь кнопку-открытие окна 
btn.onclick = function() {
  modal.style.display = "block";
}
// Закрыть окно при нажатии в любом месте
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

  .modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.85);
    -webkit-animation-name: fadeIn;
    -webkit-animation-duration: 0.3s;
    animation-name: fadeIn;
    animation-duration: 0.3s
  }
  .modal-content {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fefefe;
    border-radius: 15px 15px 0px 0px;
    width: auto;
    -webkit-animation-name: slideIn;
    -webkit-animation-duration: 0.3s;
    animation-name: slideIn;
    animation-duration: 0.3s
  }
  .modal-header {
    padding: 2px 15px;
    background: transparent;
    color: black;
  }
  .line {
    display: flex;
    width: auto;
    margin: 10;
    border: 1px solid gainsboro;
  }
  .modal-body {
    padding: 2px 10px;
  }
  .modal-params {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin: 0;
    width: auto;
    height: auto;
  }
  .params {
    vertical-align: middle;
    color: rgb(0, 0, 0);
    font-size: 16px;
    font-weight: lighter;
    align-items: center;
    margin: 10;
    width: auto;
    height: 20px;
    cursor: pointer;
  }
  .params>img {
    vertical-align: middle;
    margin-right: 10;
    width: 20;
    height: 20;
  }
  @-webkit-keyframes slideIn {
    from {
      bottom: -300px;
      opacity: 0
    }
    to {
      bottom: 0;
      opacity: 1
    }
  }
  @keyframes slideIn {
    from {
      bottom: -300px;
      opacity: 0
    }
    to {
      bottom: 0;
      opacity: 1
    }
  }
  @-webkit-keyframes fadeIn {
    from {
      opacity: 0
    }
    to {
      opacity: 1
    }
  }
  @keyframes fadeIn {
    from {
      opacity: 0
    }
    to {
      opacity: 1
    }
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bb3">
  <button class="profile-button2" id="myBtn">
            <div>
                <img src="img/ico/more.png">
            </div>
    </button>
</div>


<div id="myModal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <h3>Профиль</h3>
    </div>
    <div class="modal-body">
      <div class="modal-params">
        <div class="params"><img src="img/ico/editing.png">Редактировать профиль</div>
        <div class="params"><img src="img/ico/camera.png">Изменить фото</div>
        <div class="params"><img src="img/ico/picture.png">Изменить обложку</div>
        <div class="line"></div>

        <div class="params"><img src="img/ico/lock.png">Конфиденциальность</div>
        <div class="params"><img src="img/ico/setting.png">Настройки профиля</div>
      </div>
    </div>
  </div>
</div>