CODEWITHSUNDEEP
jqueryhtmlcssanimationsvg
Valentino Ru
Valentino Ru

Reputation: 5052

css animation on hover does not end smoothly on mouse leave

I have multiple <svg> (!!!) elements which are positioned absolutely, with initial parameters left:0 and top:0, and a div called btn. When I hover btn, I set an animation via jQuery on these svg elements like

$("#btn").hover(
    function(){
      $(this).parent().parent().find(".svg-circle").attr("class", "svg-circle zoomy");
    }, 
    function(){
      $(this).parent().parent().find(".svg-circle").attr("class", "svg-circle");
    });

These are the css classes

.svg-circle{
  position: absolute;
  z-index: 99;
  transition: filter 300ms ease-in-out;
}
.zoomy{
  animation-name: pulse_anim;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes pulse_anim{
  0% { transform: scale(1); }
  10% { transform: scale(1.0.3); }
  20% { transform: scale(0.94); }
  30% { transform: scale(1.05); }
  40% { transform: scale(0.98); }
  50% { transform: scale(1.03); }
  60% { transform: scale(1); }
  70% { transform: scale(0.98); }
  80% { transform: scale(1); }
  80% { transform: scale(1.07); }
  100% { transform: scale(1); }
}

These triggers a nice pulsing animation on these svg elements, but as soon as I leave btn with my mouse, the svg elements get scaled instantly to their initial size, without a smooth transition. Is there a way to tell the animation that it has ended and it should transit smoothly to the initial size?

https://jsfiddle.net/qrw1fgh8/

Upvotes: 0

Views: 639

Answers (1)

Tom&#225;š Zelina
Tom&#225;š Zelina

Reputation: 339

Maybe you could use animation animation-play-state property to pause your animation:

.svg-circle{
  position: absolute;
  z-index: 99;
  transition: filter 300ms ease-in-out, transform 1s;
  animation-name: pulse_anim;
  animation-duration: 4000ms;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}
.zoomy{
  animation-play-state: running;
}

https://jsfiddle.net/bgqz1h81/

Upvotes: 2

Related Questions