CSS 动画箭头动画向右出圆圈并从左侧返回

Question

我正在尝试设置一个动画，在悬停时，圆形按钮内的箭头会从按钮向右移动，然后从左侧返回。它会开始缓慢地向右移动并在离开圆边界时加速，然后它会从左侧重新进入并在再次到达起点时减速。我可以设置一些关键帧来主要完成此任务，但是当它从左侧重新进入时，它不是很顺利。

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

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

button:hover img {
  animation: train;
  animation-duration: 3s;
  animation-timing-function: cubic-bezier(0.785, 0.135, 0.06, 1.01);
}

@keyframes train {
    50% {
        transform: translateX(calc(100% + 30px));
    }
    50.001% {
        transform: translateX(-100%);
    }
    100% {
        transform:translateX(0);
    }
}

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

Answer 1

计算(100% + 30px) 也许您只是忘记将其应用到 50.001%？

50.001% {
    transform: translateX(calc( (100% + 30px) * -1) );
}