Return element to start position in hover css

Question:

I'm doing an animation on a logo, where each letter goes to one side and when I hover over the div where it is, all the letters should return to their initial value, thus forming the logo. So far so good, the problem is that since I'm using animation to move each letter, when I hover over the div, I need to remove this animation, but I need it to be done smoothly, at the same speed where the letter is moving, but when I remove it, the letter "teleports" to its place.

Is there any way I can remove the animation on the hover except without this blunt shape that it actually looks like when hovering over the div?

Follow 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 the pen link: https://codepen.io/maukruger/pen/RwbajVL?editors=1100

Answer:

Hi I just made some changes but I couldn't get an option to capture the motion of the animated object and continue from it, but take a look to see if it suits you.

.pai {
 background: lightblue;
  position: relative;
  transition: all 0.3s;
 width: 100vw;
 height: 100vh;
 &:hover {
   .three {
     animation: floating-d 5s;
   }
 }
}
.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);
    }
  }
@keyframes floating-d {
    0% {
      margin-top: -150px;
      margin-left: -150px;
      filter:blur(5px);
    }
 
    50% {
      margin-top: 0px;
      margin-left: 0px;
      filter:blur(0px);
    }
   
  }
<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>
Scroll to Top
AllEscort