如何实现停止悬停文本时触发CSS动画，让链接颜色缓慢恢复原色

你遇到的瞬间跳转问题，本质是因为仅把动画绑定在了:hover伪类上，元素默认状态没有对应的过渡/动画规则，导致悬停状态丢失后直接跳回初始样式。这里提供两种适配方案：

方案1：使用transition实现（推荐，适合简单状态过渡） #

如果只是单属性（颜色、背景色等）的两状态切换，不需要复杂多帧动画，直接用CSS过渡属性是最优解，天然支持双向过渡：

/* 导航链接默认样式 */
.nav-link {
  color: #333; /* 替换为你的基础文字色 */
  /* 给颜色属性添加0.3s缓动过渡，所有状态变化都会触发过渡效果 */
  transition: color 0.3s ease;
}

/* 悬停样式 */
.nav-link:hover {
  color: #2563eb; /* 替换为你的悬停文字色 */
}

如果需要同时过渡多个属性，可逗号分隔指定，比如同时过渡文字颜色和背景色：

transition: color 0.3s ease, background-color 0.3s ease;

不推荐直接写transition: all 0.3s ease，指定具体属性性能更好，也能避免不必要的属性被意外过渡

方案2：保留keyframes实现（适合复杂多帧动画场景） #

如果你确实需要用keyframes做更复杂的动画效果，可以给默认状态也加反向动画，同时要给动画加上forwards属性保证动画结束后停在最终帧：

.nav-link {
  color: #333;
  /* 默认状态绑定反向恢复动画 */
  animation: colorReset 0.3s ease forwards;
}

.nav-link:hover {
  /* 悬停状态绑定正向变色动画 */
  animation: colorHover 0.3s ease forwards;
}

/* 悬停变色动画 */
@keyframes colorHover {
  to {
    color: #2563eb;
  }
}

/* 移出恢复动画 */
@keyframes colorReset {
  from {
    color: #2563eb;
  }
  to {
    color: #333;
  }
}

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