Почему дергается анимация? Когда навести курсор, потом убрать, дождаться пока анимация вернется на начальную позицию и резко опять навести курсор, то анимация начинается как бы не с начала. Это срабатывает не всегда, потому наводить придется раз 50 )) Почему так происходит и как это исправить?
Это будет иконка меню-бургер складывающаяся (к примеру в крест) при наведении. Знаю что проблема легко решается на jquery, но хотелось бы выяснить почему так происходит.
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);
}
тут пример https://jsfiddle.net/vm12aa1w/
тут задавал вопрос но решения так и не нашел, в комментариях к первому ответу человек выложил видео(отдельное ему спасибо) в котором видно как анимация резко соскакивает на начало https://otvet.mail.ru/question/183027834