Return element to starting position in hover css

I am doing an animation on a logo, where each letter goes to one side and when I hover the mouse over the div where it is, all letters should return to the initial value, thus forming the logo. Until then it's okay, the problem is that since I'm using animation to move each letter, when I hover the mouse over the div, I need to remove this animation, only I need it to be done in a smooth way, at the same speed at which the letter is moving, only when I remove it, the letter "teleports" to its place.

Is there any way I can remove the animation in hover only without it being without this abrupt shape that is currently when you hover your mouse on the div?

Follows example for better understanding

.pai {
  position: relative;
  transition: all 0.3s;
}
.pai img {
  max-width: 50px;
  top: 150px;
}
.one {position: absolute}
.two {position: absolute;left:50px}
.three {position: absolute;left:100px; animation: floating-c 5s infinite;}
@keyframes floating-c {
    0% {
      margin-top: -150px;
      margin-left: -150px;
      filter:blur(5px);
    }
    50% {
      margin-top: 0px;
      margin-left: 0px;
      filter:blur(0px);
    }
    100% {
      margin-top: -150px;
      margin-left: -150px;
      filter:blur(5px);
    }
  }
  .three:hover {
    animation: none;
    transition: all 0.3s;
  }

<div class="pai">
  <img class="one" src="https://images.vexels.com/media/users/3/142577/isolated/preview/6f56190e2f5224ce831a6dd08be708b1-um-isotipo-de-origami-de-carta-by-vexels.png">
  <img
  class="two"
  src="https://image.flaticon.com/icons/png/512/37/37502.png">
  <img
  class="three"
  src="https://png.pngtree.com/element_pic/17/07/10/208ed1d531fd30c78cd184c2e5167370.jpg">
</div>

Follow pen link: https://codepen.io/maukruger/pen/RwbajVL?editors=1100