translateY() triggered when hovered from point of origin

Question

is it possible not to trigger the animation indefinitely when you move the cursor at the bottom of the button?

here\'s how it looks like -- gif and codepen

相关标签:

Answer 1

Make the button bigger at the bottom by adding a pseudo element and you will avoid the flicker:

.container {
  padding: 1rem;
}

.container .here {
  text-decoration: none;
  color: white;
  background: darkgreen;
  display: inline-block;
  margin: 2rem;
  padding: 1rem;
  transition: all .1s;
  position:relative;
}
.container .here:before {
  content:"";
  position:absolute;
  top:100%;
  left:0;
  right:0;
}

.container .here:hover {
  transform: translateY(-1.5rem) scale(1.5);
}
.container .here:hover:before {
  height:1.5rem;
}

<div class="container">
  <div class="here">hover here</div>
</div>