CSS鼠标悬停在translateXY中

Question

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 1

You can create a container div for the image, wich always stays in the same place, and put the image inside this div. Then instead of checking, if the mouse is over the image, you can check if it is over the div.

 #container { border: 1px solid black; } .logo_img { width:100px; margin-left: calc(50% - 50px); } #container:hover .logo_img { -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 id="container"> <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="logo_img"> </div> 

Answer 2

If you mean to make animation work without hover then add this animation-iteration-count to infinite .

.logo_img {
    -webkit-animation: hvr 5s ease-out;
    -ms-animation: hvr 5s ease-out;
    animation: hvr 5s ease-out infinite;
}

Updated another answer using jQuery,

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

$(document).ready(function(){
    $("img").on("mouseenter",function(){
    $(this).addClass("logo_img");
  });
  $("img").on("mouseleave",function(){
    $(this).removeClass("logo_img");
  });
});

Answer 3

var duration = 500;

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

CODEPEN