Animation zoomIn is flashing with mouseenter

Question

I’m using Animate.css to zoom in on an image. The idea is that the animation only works with the Hover/mouseenter, that is, when the user hovers over it. When I use any animation other than zoomIn, it works normally; however, with the code below, although the zoom works, the image is blinking when I hover the mouse in certain places. If I shoot the . mouseout, the event only occurs once. What to do to resolve?

<img src="imagens/icone.png" class="hover" />

    <script>
        $(document).ready(function() {
            $('.hover').mouseenter(function() {
                var mv = $(this);
                mv.addClass('animated zoomIn');
            });
            $('.hover').mouseout(function(){
              var mv = $(this);
              mv.removeClass('animated zoomIn');
            });
        });
    </script>

Answer 1

As I had commented, this error was happening by the following:

When the class zoomIn is added, it changes the properties of the element like scale, that goes from 0 to 1. That’s what makes animation occur.

Just as you’re listening to 2 events, one of mouseenter and one of mouseleave, the Handler of mouseenter is executed at the moment the user passes the mouse. But how the scale is lowered to 0, the image automatically exits from below the mouse and triggers the Handler mouseleave. That one handler in turn, take the class zoomIn.

These events keep repeating over and over again That’s why you see the blinking image.

One solution is as follows::

$('.hover').mouseenter(function() {
    var mv = $(this);
    mv.addClass('animated zoomIn').one("mozAnimationEnd webkitAnimationEnd oanimationend animationend", function(){
      mv.removeClass('animated zoomIn');
    });
});

In the documentation it is explained that the method one() Jquery is very useful when you want to at least run one handler for a function and is what you need. You need the zoomIn is executed at least once before you can remove it.

You can see how it works here.

I hope this solves your problem.

Hugs.

Answer 2

Andrew’s answer is perfect, really solves the problem, I leave an alternative here if you choose not to use an entire library with effects that can be performed easily (even with more visual implementations) only with CSS.

img:hover {
  cursor: pointer;
  animation-name: imgAnime;
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  animation-play-state: running;
}

@keyframes imgAnime {
  0% { 
    width: 200px;
    height: 200px;
    opacity: 0.2;
  }
  25% {
    width: 80px;
    height: 80px;
    opacity: 0.4;
  }
  50% {
    width: 120px;
    height: 120px;
    opacity: 0.6;
	}
  75% {
    width: 160px;
    height: 160px;
    opacity: 0.8;
  }
  100% {
    width: 200px;
    height: 200px;
    opacity: 1.0;
  }
}

<img src="https://images.pexels.com/photos/1028674/pexels-photo-1028674.jpeg?cs=srgb&dl=apple-black-braided-1028674.jpg&fm=jpg" class="hover" width="200" height="200"/>