2

If I have keyframe animation running on an div hover (say, for 3s) and the element hover ends in 2 seconds, the animation abruptly ends and resets the div position. Here's an example, I am rotating a div on hover to 360 degrees in 3 seconds. If I hover out within two seconds, the animation ends abruptly.

I want the animation to reverse from the exact angle it had been rotated to. (See demo below)

How do I prevent the element to reset to its original position and start reversing the animation from the rotated angle, back to its original position.

.box {
  width : 160px; height : 160px; background-color : green;
}
.box:hover {
  -webkit-animation: move 3s;
}

@-webkit-keyframes move {
  0%   { -webkit-transform: rotate(360deg); }
  100% { -webkit-transform: rotate(0deg); }
}
<div class ="box"></div>

I believe it needs to be done with some JS/jQuery using the mouseout event but I don't know exactly how to achieve this.

Help would be appreciated.

saibbyweb
  • 2,864
  • 2
  • 27
  • 48
  • 1
    Use `transition` instead of `animation` – Mohammad Oct 02 '18 at 07:39
  • I know transition can be used, but as mentioned in the question I specifically want to reverse a KEYFRAME animation. – saibbyweb Oct 02 '18 at 07:42
  • 1
    Possible duplicate of [How to reverse an animation on mouse out after hover](https://stackoverflow.com/questions/16516793/how-to-reverse-an-animation-on-mouse-out-after-hover) – Gerard Oct 02 '18 at 07:48
  • @Gerard No its not. It doesn't answer how to get the rotated angle at hover out. It simply sets the angle at 360deg on hover out and then reverses the animation. – saibbyweb Oct 02 '18 at 07:52
  • [What you said](https://stackoverflow.com/questions/52603863/how-to-reverse-keyframe-animation-the-moment-hover-ends-getting-the-state-of-th#comment92141968_52603863) is just like "*I know I can use a screwdriver, but I specifically want to use a hammer*". Maybe what you have is indeed a nail and requires such an hammer, but from here it really looks like a screw. So please explain us why you think you should use animation instead of transition, we might well show you that it's actually a screw too. – Kaiido Oct 02 '18 at 08:01
  • 1
    https://css-tricks.com/get-value-of-css-rotation-through-javascript/ – Gerard Oct 02 '18 at 08:02
  • @Kaiido The code I posted in my question is just an example. My real keyframe animation is quite complex, dealing with multiple css properties. I tried using transition, but it doesn't give me the desired result. – saibbyweb Oct 02 '18 at 08:51
  • Can you share it so we can judge? 90% of the time, this question (yes it's been asked several times already) is solved by switching to transitions. – Kaiido Oct 02 '18 at 08:56
  • It would be difficult for me to fully reproduce the problem here but still I will try to explain it in simpler terms. See if we use transition time 3s and we hover for 2 seconds and then hover out. The box will rotate towards left for 2 seconds and then it will take it 2 more seconds to rotate back, right? I want to take control of the reverse animation, I want the rotate back animation to take 5 seconds instead of the 2 which I am restricted by the transition time property. This is one of the reasons why I need to do it in keyframes, it give you more control on the reverse animation. – saibbyweb Oct 02 '18 at 09:08

0 Answers0