如何让CSS动画顺利回到原位答案

【问题标题】：How to make CSS animations return to the original position smoothly如何让CSS动画顺利回到原位
【发布时间】：2021-08-30 14:45:37
【问题描述】：

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

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

【问题讨论】：

这里需要过渡而不是动画
@TemaniAfif 我已经尝试过转换，但问题是在重新加载页面时转换正在应用于元素（当重新加载页面时，字母间距正在转换为 2px，当我将光标悬停在它再次过渡到 3px 并且颜色相同）

标签： html css css-animations

【解决方案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>

编码愉快！

【讨论】：

【解决方案2】：

@keyframes 动画不是必需的。我们只需要更改font-size 并将transition CSS 属性添加到元素，以使hover 时的更改更加平滑。你给的过渡越多ms，它就会变得越平滑。

试试下面的sn-p

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

【讨论】：

【解决方案3】：

使用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代码应该保持不变

【讨论】：