How to avoid interupted CSS animations

user_17528452 0
Viewed 57

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?

css-animations css html
2 Answers

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.

user_92015870

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>

user_171488350
Related