How to avoid interupted CSS animations-CodePudding

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?

CodePudding user response：

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

CodePudding user response：

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 >
    <div id="i"><strong>Hover</strong></div>
  </div>
</body>

</html>