Move animation instantly going to final state on hover out

[undo (Watson Doe)]

On a button, I have a hover interaction that shifts the arrow icon inside a little to the right, then puts it back to its original position.

However, when hovering out, the arrow instantly returns to its original position without smooth transition, although I have set a delay.

Did I do something wrong?

---

Here is my public share link: LINK

[undo (Watson Doe)]

Solved: apparently you have to maintain consistency in your units in animations. As I moved my element 0.5 rem to the right, its initial/final position has to be 0 rem and not 0 px.