实现圆形按钮内箭头向右移出再左侧平滑回入的CSS动画

你的核心问题在于50%与50.001%的位置突变，导致动画进度跳变，加上全局缓动曲线不匹配移入阶段的运动逻辑，最终造成回入时的卡顿。以下是调整后的实现方案：

关键优化点 #

• 将移出与移入拆分为两个独立动画，分别配置符合阶段需求的缓动曲线
• 移除位置突变的关键帧，让动画衔接更自然
• 精准计算移动距离，确保视觉逻辑一致

完整代码 #

button {
  display: inline-flex;
  width: 50px;
  height: 50px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

button img {
  display: block;
  width: 30px;
}

button:hover img {
  animation: slide-out 1.5s cubic-bezier(0.135, 0.785, 1.01, 0.06) forwards,
             slide-in 1.5s cubic-bezier(0.06, 1.01, 0.785, 0.135) forwards 1.5s;
}

@keyframes slide-out {
  to {
    transform: translateX(calc(100% + 30px));
  }
}

@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

<button><img alt="箭头" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjIuODggMTA4LjA2IiB4bWxuczp2PSJodHRwczovL3ZlY3RhLmlvL25hbm8iPjxwYXRoIGQ9Ik01OC45NCAyNC4yOGExNC4yNyAxNC4yNyAwIDAgMSAyMC4zNS0yMGwzOS40OSA0MC4xNmExNC4yOCAxNC4yOCAwIDAgMSAwIDIwbC0zOC42OSAzOS4zNWExNC4yNyAxNC4yNyAwIDEgMS0yMC4zNS0yMGwxNS4wOC0xNS4zOC02MC42Ny0uMjlhMTQuMjcgMTQuMjcgMCAwIDEgLjI0LTI4LjU0bDU5Ljg1LjI4LTE1LjMtMTUuNTh6Ii8+PC9zdmc+" /></button>

效果说明 #

1. 移出阶段：使用cubic-bezier(0.135, 0.785, 1.01, 0.06)实现从缓慢启动到加速移出的效果
2. 移入阶段：使用反向的缓动曲线cubic-bezier(0.06, 1.01, 0.785, 0.135)，让箭头从左侧快速进入，接近终点时减速，完美匹配需求
3. 两个动画通过延迟执行无缝衔接，消除了原方案中位置突变导致的卡顿

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