With CSS transitions, let’s say when you hover over a square, it quadruples in size, well, if you take the mouse off the square abruptly, css transitions allow for this, they sort of remember what point the transition was up to and reverse it from that point nicely. However, with css animations, whether you use the pseudo class :hover, or you add the animation via .addClass(), if you remove the mouse from the element in question, it snaps back nastily. Is there any way with jquery or javascript to either a) force the animation to play to it’s end before the class containing the animation is removed/ replaced so that even if you move the mouse away the animation will play out before anything else happens or b) listen for what keyframe the animation was at when you moved the mouse away so that when the animation for mouseOut begins is starts at a different keyframe? Right now I have my square that slowly expands for the mouse over animation and slowly retracts back to its original size when I mouse out, but when i take the mouse off it too soon before the first animation finishes, it obviously snaps to the first keyframe of the next animation (bigger size square), and so on and so forth if I hover over it again too quickly. By the way, the reason i do not want to use transition is because for more complex animations I need to use @ keyframes rule this was just an example. Thanks.
