How to make CSS animations return to the original position smoothly

Question

I'm making my very first website and I'm trying to add some animations to my navbar links so their size and color change when I hover over them. The problem is that the animation works well but once I remove the curser, the elements return to their original styles instantly without being animated. I have searched for a solution but couldn't find anything that could actually fix this problem.

---

.nav_links a {
  color: #342056;
  font-family: "Open Sans", sans-serif;
  font-size: 1.2em;
  text-decoration: none;
  letter-spacing: 2px;
}
.nav_links a:hover {
  animation: nav_elements_animation 0.5s;
  animation-fill-mode: forwards;
}
@keyframes nav_elements_animation {
  100% {
    color: #0d0220;
    text-decoration: underline;
    letter-spacing: 3px;
    font-size: 1.3em;
  }
}

 <nav>
        <div class="logo">
            <h4><a href="Index.html"><img src="Images/AbdoDevs.png" alt="AbdoDevs"></a></h4>
        </div>
        <ul class="nav_links">
            <li><a href="Index.html">Home</a></li>
            <li><a href="#About">About</a></li>
            <li><a href="#Our_Projects">Our Projects</a></li>
            <li><a href="#Contact">Contact</a></li>
        </ul>
    </nav>

Answer 1

You can achieve it like this.

.nav_links a {
  color: #342056;
  font-family: "Open Sans", sans-serif;
  font-size: 1.2em;
  text-decoration: none;
  letter-spacing: 2px;
  transition: all .5s
}
.nav_links a:hover {
    color: #0d0220;
    text-decoration: underline;
    letter-spacing: 3px;
    font-size: 1.3em;
}
}

 <nav>
        <div class="logo">
            <h4><a href="Index.html"><img src="Images/AbdoDevs.png" alt="AbdoDevs"></a></h4>
        </div>
        <ul class="nav_links">
            <li><a href="Index.html">Home</a></li>
            <li><a href="#About">About</a></li>
            <li><a href="#Our_Projects">Our Projects</a></li>
            <li><a href="#Contact">Contact</a></li>
        </ul>
    </nav>

Happy coding!

Answer 2

@keyframes animations are not necessary for this. We just need to change the font-size and add the transition CSS property to the element to give the smoothness for the changes when hover. The more ms you give the transition, the smoother it becomes.

Try the following snippet

.nav_links a {
  color: #342056;
  text-decoration: none;
  letter-spacing: 2px;
  transition: 400ms;
}
.nav_links a:hover {
  font-size:1.5em;
}

<nav>
  <ul class="nav_links">
      <li><a href="Index.html">Home</a></li>
      <li><a href="#About">About</a></li>
      <li><a href="#Our_Projects">Our Projects</a></li>
      <li><a href="#Contact">Contact</a></li>
  </ul>
</nav>