Answer the question
In order to leave comments, you need to log in
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
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question