Анимация в CSS. Как сделать, чтобы :hover не прерывал текущую анимацию (from – to)?

Question

[Сергей Игнатьев]

По анимации элемент должен перемещаться из .А в .В, и на пути при наведении на элемент - он должен увеличиваться .
Проблема в том, что когда наводишь на элемент – он сразу попадает в конечную точку , и только там срабатывать стили hover, а потом анимация начинается заново(((

.balloon{
    position:fixed;
    right:5px;
    bottom:-40px;
    z-index:999;
  
  animation:ballon_animation 8s ;
}

.balloon:hover{
      -webkit-animation-name: hvr-pop;
  animation-name: hvr-pop;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

@keyframes ballon_animation
{
from {position:fixed;
    right:5px;
    bottom:-190px;
    z-index:999;} 



to {position:fixed;
    right:5px;
    bottom:-40px;
    z-index:999;} 
}

Comments

[Андрей Верх]

Увеличение можно и через transiton сделать...

[Сергей Игнатьев]

Андрей Верх: Спасибо большое вам!!!

Answer 1

[Ivan Bogachev]

Можно например вот так

Comments

[Сергей Игнатьев]

Офигеть! Как вы не поленились даже код написать!)) Завтра на всех светофорах вам должен гореть зеленый!!) Спасибо вам большое!