translateY() triggered when hovered from point of origin

问题

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

.container {
  padding: 1rem;
}

.container .here {
  text-decoration: none;
  color: white;
  background: darkgreen;
  display: inline-block;
  margin: 2rem;
  padding: 1rem;
  transition: all .1s;
}

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

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

回答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>

来源：https://stackoverflow.com/questions/53533387/translatey-triggered-when-hovered-from-point-of-origin