CODEWITHSUNDEEP
htmlcsscss-animations
Falling10fruit
Falling10fruit

Reputation: 319

How to avoid interupted CSS animations

If you hover your mouse under the text but inside the div, the animation will be interrupted mid way and makes this glitchy "animation" where the element keeps on switching between from being animating and not animated.

@keyframes hover {
  0% {bottom: 0px; border-radius: 0%;}
  100% {bottom: 100px; border-radius: 10%;}
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

#i {
    transition: 0.5s ease;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(255, 100, 0);
    width: 200px;
    height: 200px;
    font-size: 50px;
    text-align: center;
    font-family: sans-serif;
    bottom: 0px;
}

#i:hover {
    position: relative;
    cursor: pointer;
    animation: hover 0.5s ease;
    bottom: 100px;
    border-radius: 10%;
}
<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div id="i"><strong>Hover</strong></div>
  </body>
</html>

This is a problem when the user goes past a button too quickly, so how do I fix this?

Upvotes: 2

Views: 193

Answers (2)

Nick Vu
Nick Vu

Reputation: 15520

The problem is #i moving up (position changes) and your hovering position is still the same which does not have #i. Therefore, it's applied #i styles (not #i:hover styles).

You can add a container element for #i that will help you reserve the container space for hovering behavior.

@keyframes hover {
  0% {
    bottom: 0px;
    border-radius: 0%;
  }
  100% {
    bottom: 100px;
    border-radius: 10%;
  }
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container #i {
  transition: 0.5s ease;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(255, 100, 0);
  width: 200px;
  height: 200px;
  font-size: 50px;
  text-align: center;
  font-family: sans-serif;
  bottom: 0px;
}

.container:hover #i {
  position: relative;
  cursor: pointer;
  animation: hover 0.5s ease;
  bottom: 100px;
  border-radius: 10%;
}
<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
  <div class="container">
    <div id="i"><strong>Hover</strong></div>
  </div>
</body>

</html>

Just one side note, animation does support a full animation cycle if the animation is completed. If you try to interrupt it while animating, CSS does not help you to complete it (a glitch will happen).

In that case, you can use transition instead of animation

transition: 0.5s ease;

If you want to have a complex animation with keyframes, you can consider having Javascript to handle it, you can check this document out.

Upvotes: 1

BeanBoy
BeanBoy

Reputation: 855

You dont need Keyframes here at all, think simple... You can write the needed transformations in the :hover #i section.

Now your animation is very smooth and you dont have the glitch, that when you move the cursor away while the animation is playing, the block doesnt just fall down.

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container #i {
  transition: 0.5s ease;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(255, 100, 0);
  width: 200px;
  height: 200px;
  font-size: 50px;
  text-align: center;
  font-family: sans-serif;
  bottom: 0px;
}

.container:hover #i {
  position: relative;
  cursor: pointer;
  animation: 0.5s ease;
  transform: translateY(-100px);
  border-radius: 10%;
}
<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
  <div class="container">
    <div id="i"><strong>Hover</strong></div>
  </div>
</body>

</html>

Upvotes: 0

Related Questions