translateY () срабатывает при наведении из точки происхождения

Question

возможно ли не запускать анимацию бесконечно, когда вы перемещаете курсор внизу кнопки?

вот как это выглядит - gif и 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>

Answer 1

Увеличьте кнопку внизу, добавив псевдоэлемент, и вы избежите мерцания:

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