Im making notifications for my website but when they delete one by one it just teleports to the top, but i want it to smoothly transition between it, what i mean by this is when the notification deletes it is "teleporting" to the top and not just smoothly go to it

my code

html:

<div class="notifications">
</div>

js:

var notification_max = 5;
function notification(title, content, type){
  if(document.querySelectorAll('.notification').length > 5) return
  function icon(){
    if(type == 'error') return '<i class="fal fa-exclamation-triangle"></i>'
    if(type == 'message') return '<i class="fas fa-comment-alt-dots"></i>'
  }
  var htmlContent = `
      <div class="icon">
        ${icon()}
      </div>
      <div class="text">
        <div class="title">${title}</div>
        <div class="content">${content}</div>
      </div>
  `
  var newNotification = document.createElement('div')
  newNotification.classList = "notification"
  newNotification.innerHTML = htmlContent
  
  document.querySelector(".notifications").appendChild(newNotification)
  window.setTimeout(()=>{
    document.querySelector(".notifications").removeChild(newNotification)
  },2000)
}


notification("Title", "Content", "error")

here is link to codepen if it can help: LINK