html - 如何让CSS动画顺利回到原来的位置

Question

我正在制作我的第一个网站，我正在尝试向我的导航栏链接添加一些动画，以便当我将鼠标悬停在它们上面时它们的大小和颜色会发生变化。问题是动画效果很好，但是一旦我移除了光标，元素就会立即恢复到原来的样式而不会被动画化。我一直在寻找解决方案，但找不到任何可以实际解决此问题的方法。

.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

你可以像这样实现它。

.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>

快乐编码!