从原点悬停时触发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>