How to add a transition/animation effect while changing position of a div using javascript

umm im making something which will hide my navbar on scroll and display it again accordingly which works well but was curious if i could make it more like an animation or transition.

Here’s my code so far

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("bottom-navigation").style.bottom = "0";
   
  } else {
    document.getElementById("bottom-navigation").style.bottom = "-100px";
  }
  prevScrollpos = currentScrollPos;
}