MiLaD TNT MiLaD TNT - 1 year ago 108
Javascript Question

CSS hover with mouse in translateXY

Thank you for reading my question



.ab {
position:absolute;left:50%;top:50%
}
.logo_img {
width:100px;
}
.logo_img:hover {
-webkit-animation: hvr 0.5s ease-out 1 0s;
-ms-animation: hvr 0.5s ease-out 1 0s;
animation: hvr 0.5s ease-out 1 0s;
}
@keyframes hvr {
0% { -webkit-transform: translateX(0px);transform: translateX(0px); }

50% { -webkit-transform: translateX(900px);transform: translateX(900px);}
51% { -webkit-transform: translateX(-900px);transform: translateX(-900px);}
100% {-webkit-transform: translateX(0px);transform: translateX(0px);}
}

<div class="ab"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="logo_img" /></div>





Problem is when mouse goes on it, and image moves, then mouse is not on image and sometimes hover does not work!

Is there any way to do animation like this hover but if mouse is not on image... it keeps going?

Is it possible to user jQuery hover and add class on hover? And delete that class after animation ends?

Answer Source
var duration = 500;

$('img').mouseenter(function() {
  $(this).addClass('hvr').delay(duration).queue(function() {
    $(this).removeClass('hvr');
    $(this).dequeue();
  });
});

CODEPEN

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download