CSS анимирует анимацию стрелки вправо из круга и обратно слева ⇐ CSS

[Anonymous]

Я пытаюсь настроить анимацию, в которой при наведении курсора стрелка внутри моей круглой кнопки анимируется из кнопки вправо, а затем возвращается обратно слева. Он начнет медленно анимироваться вправо и ускоряться, покидая границу круга, а затем снова войдет в него слева и замедлится, когда снова достигнет начальной точки. Мне удалось настроить несколько ключевых кадров, чтобы в основном добиться этого, но при повторном входе слева они не очень плавные.

Код: Выделить всё

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);
}
}

Код: Выделить всё

[img]data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjIuODggMTA4LjA2IiB4bWxuczp2PSJodHRwczovL3ZlY3RhLmlvL25hbm8iPjxwYXRoIGQ9Ik01OC45NCAyNC4yOGExNC4yNyAxNC4yNyAwIDAgMSAyMC4zNS0yMGwzOS40OSA0MC4xNmExNC4yOCAxNC4yOCAwIDAgMSAwIDIwbC0zOC42OSAzOS4zNWExNC4yNyAxNC4yNyAwIDEgMS0yMC4zNS0yMGwxNS4wOC0xNS4zOC02MC42Ny0uMjlhMTQuMjcgMTQuMjcgMCAwIDEgLjI0LTI4LjU0bDU5Ljg1LjI4LTE1LjMtMTUuNTh6Ii8+PC9zdmc+[/img]

Подробнее здесь: https://stackoverflow.com/questions/792 ... rom-the-le