I am looking to understand how I can seamlessly transition from a hover-triggered animation to an exit-hover animation, regardless of where the hover animation is in progress. Currently, if I exit hover too quickly, the animation jumps back to its starting position.
Is there a way to ensure that even if I exit hover prematurely, the animation will complete before transitioning into the exit-hover animation?
If you click here, you can see a live demo of what I'm trying to achieve.
Here's a snippet of my HTML and CSS:
<div class="image-container">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
.image-container {
margin: 50px;
}
img {
width: 100px;
-webkit-transform: rotate(-45deg);
}
img.over {
-webkit-animation: enlarge .5s cubic-bezier(.42,0,.8,1) both,
enlarge-2 .25s cubic-bezier(.2,0,.3,1) .5s forwards;
}
img.out {
-webkit-animation-name: shrink;
-webkit-animation-duration: .5s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: both;
-webkit-animation-direction: forwards;
}
@-webkit-keyframes enlarge {
from {transform: rotate(-45deg) scale(1);}
to {transform: rotate(0deg) scale(1.5);}
}
@-webkit-keyframes enlarge-2 {
from {transform: scale(1.5);}
to {transform: scale(1.3);}
}
@-webkit-keyframes shrink {
from {transform: rotate(0deg) scale(1.3);}
to {transform: rotate(-45deg) scale(1);}
}
And here's the JavaScript implementation:
$("img").hover(
function () {
$(this).removeClass('out').addClass('over');
},
function () {
$(this).removeClass('over').addClass('out');
}
);