MiLaD TNT MiLaD TNT - 5 months ago 16
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
var duration = 500;

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

CODEPEN

Comments