Why twitching animation? When you hover the cursor, then remove, wait until the animation returns to its initial position and sharply hover the cursor again, the animation begins, as it were, not from the beginning. This does not always work, because you have to direct 50 times)) Why is this happening and how to fix it?

This will be the icon of the menu-burger folding (for example in the cross) when hovering. I know that the problem is easily solved on jquery, but I would like to find out why this is happening.

HTML

<div class="container"> <div class="line"></div> </div>

CSS

 .container{ width:100px; height:100px; background-color:grey; margin:80px; } .line{ width:100%; height:8px; background-color:black; transition: 1s linear; } .container:hover .line{ transition: 1s linear; transform:rotate(90deg); }

here is an example of https://jsfiddle.net/vm12aa1w/

here I asked a question, but I did not find a solution; in the comments to the first answer, the person posted a video (special thanks to him) in which you can see how the animation abruptly jumps off to the beginning https://otvet.mail.ru/question/183027834

  • Is there no problem in the current version of chrome (49)? - Qwertiy ♦

1 answer 1

  1. I have everything smoothly.
  2. Do not write a transition inside :hover . Instead, you need to write transition for the element itself, and for :hover just change the desired properties. I have already come across the fact that when you prescribe a transition to an :hover , jumps are observed - it probably does not work instantly, but how it will turn out, after which the animation stage is recalculated for the entire past time.
  • 1. So there was little directing to and fro) 2. If you remove the transition from: hover, then the jumps become even more. I also thought that the transform works faster transition. Because of this, some part of the animation slips. - Rostislav
  • @ Rostislav, yes, I understand ... Reproduced. - Qwertiy ♦
  • @ Rostislav, it feels like it is connected to the line itself. - Qwertiy ♦
  • I just tried to point only at the square, maybe less, but there are still jumps. You do not know by chance how to debug an animation, see its course? For example, in chrome, there is something in the developer’s tools for animation, but I don’t know if that’s what. I'm going to try now. - Rostislav
  • @ Rostislav, did not debug. Fortunately, everything worked. - Qwertiy ♦