如何让CSS个动画return平滑到原位置

Question

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

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

编码愉快！

Answer 2

使用transition命令可以使动画流畅

我建议您可以使用此 css 代码：

.nav_links a {
  color: #342056;
  font-family: "Open Sans", sans-serif;
  font-size: 1.2em;
  text-decoration: none;
  letter-spacing: 2px;
  transition: all 0.5s
}
.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;
  }
}

并且 html 代码应该保持不变

Answer 3

@keyframes 动画不是必需的。我们只需要更改 font-size 并在元素中添加 transition CSS 属性来为 hover 时的更改提供平滑度。过渡 ms 越多，过渡就越平滑。

试试下面的代码片段

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

如何让CSS个动画return平滑到原位置

How to make CSS animations return to the original position smoothly

html

css

css-animations

试试下面的代码片段