Return element to initial position in Hover css

Asked

Viewed 195 times

3

I am making an animation in a logo, where each letter goes to one side and when I pass the mouse in the div where it is, all the letters must return to the initial value, thus forming the logo. So far so good, the problem is that as I’m using Animation to move each letter, when I move 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 that the letter is moving, only when I remove, the letter "teleports" to its place.

Is there any way I can remove Animation in Hover only without it being so abrupt that it is currently when you mouse in 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>

Following link from the flash drive: https://codepen.io/maukruger/pen/RwbajVL?editors=1100

css css-animations scss

1 answer

0

Hello I just made some modifications but I could not get an option to capture the movement of the animated object and continue from it, but take a look to see if it already 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>

Browser other questions tagged css css-animations scss

You are not signed in. Login or sign up in order to post.