如何使粘性导航栏具有动画效果？

<nav id="sticky-nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

#sticky-nav {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 10px;
}

#sticky-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#sticky-nav ul li {
  display: inline-block;
  margin-right: 10px;
}

#sticky-nav ul li a {
  color: #fff;
  text-decoration: none;
}

.sticky {
  animation: slideDown 0.5s;
}

@keyframes slideDown {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

window.addEventListener('scroll', function() {
  var nav = document.getElementById('sticky-nav');
  var distanceFromTop = nav.getBoundingClientRect().top;

  if (distanceFromTop <= 0) {
    nav.classList.add('sticky');
  } else {
    nav.classList.remove('sticky');
  }
});