如何让CSS hover动画结束后平滑返回元素原始位置与样式

问题原因 #

你当前使用的CSS关键帧动画仅绑定在:hover伪类上，仅当鼠标悬停在元素上时动画才会触发。当鼠标移出元素后，:hover状态失效，已触发的动画会直接中断，元素没有对应的过渡逻辑回到初始样式，因此会出现生硬的跳转效果。

解决方案 #

这类两个状态之间的简单切换效果，使用transition属性实现更简便，也天然支持入场、退场双向平滑过渡，修改后的CSS代码如下：

.nav_links a {
  color: #342056;
  font-family: "Open Sans", sans-serif;
  font-size: 1.2em;
  text-decoration: none;
  letter-spacing: 2px;
  /* 给所有可过渡属性添加0.5s的平滑过渡效果 */
  transition: all 0.5s ease;
}

.nav_links a:hover {
  /* 直接写悬停后的目标样式即可，不需要定义keyframes */
  color: #0d0220;
  text-decoration: underline;
  letter-spacing: 3px;
  font-size: 1.3em;
}

注意事项 #

transition属性需要添加在元素的默认状态选择器中，不要仅添加到:hover选择器里，这样才能保证鼠标移入、移出时都能触发过渡效果。如果你确实需要使用关键帧实现更复杂的多阶段动画，才需要额外给默认状态定义反向的退场动画，这个场景下使用transition是最优方案。

内容的提问来源于stack exchange，提问作者AbdelrahmanAhmed