S
S
Sergey Ignatiev2016-08-17 21:13:55
css
Sergey Ignatiev, 2016-08-17 21:13:55

Animation in CSS. How can I make :hover not interrupt the current animation (from - to)?

According to the animation, the element should move from .A to .B, and on the way when hovering over the element, it should increase.
The problem is that when you hover over an element, it immediately hits the end point, and only there the hover styles work, and then the animation starts again (((

.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;} 
}

Answer the question

In order to leave comments, you need to log in

1 answer(s)
I
Ivan Bogachev, 2016-08-17
@serebro223

You can for example like this

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question