如何实现CSS链接悬停动画鼠标移出时平滑返回初始位置

AI 小北

2026-8-29

问题原因

当前代码仅在<a>标签的:hover状态下绑定了位移动画，鼠标移出链接区域时，hover伪类立即失效，对应的动画规则会被直接移除，浏览器会瞬间把元素样式重置为初始值，因此会出现文本瞬移归位的生硬效果。

修复方法

这类简单的双向状态切换交互，不需要用@keyframes关键帧动画实现，用CSS的transition过渡属性是更简洁、维护成本更低的方案：只要给链接的默认状态添加过渡规则，浏览器会自动监听指定CSS属性的变化，不管是进入hover还是离开hover，只要属性值发生改变，就会自动触发平滑过渡效果。

具体修改点如下：

移除原有:hover上绑定的所有animation相关规则，以及单独定义的@keyframes link动画段
给链接的默认样式添加transition属性，指定要过渡的属性、动画时长、缓动函数
在:hover状态下直接设置偏移后的目标边距值即可

修改后的完整CSS代码如下，原有HTML代码不需要做任何调整：

#connect {
  background-color: #303841;
  margin-top: 0;
  color: white;
  padding-top: 5%;
  text-align: center;
  padding-bottom: 5%;
}
#connect h1 {
  margin-top: 0;
}
#connect a {
  color: white;
  text-decoration: none;
  /* 监听margin-left属性变化，0.35秒完成过渡，缓动效果为ease-out */
  transition: margin-left .35s ease-out;
}
#connect a:hover {
  margin-left: 3%;
}