悬停元素时边界附近的动画问题

Question

当我将鼠标悬停并将动画（例如旋转）设置为元素时，我将transform属性用于动画。

但是，这偶尔会导致如下图所示的缺陷。

关于这个问题，我确认无论我看哪个网站都没有写。

甚至Twitter都没有解决这个问题！

我应该如何应对这个问题？

animation problem in the vicinity of the boundary

---

例如，假设您具有应用了此类CSS的HTML。

a {
  border-radius: 4px;
  display: inline-block;
  height: 50px;
  text-decoration: none;
  width: 150px;
  background: #a0f;
  border-radius: 4px;
  text-align: center;
  transition: all 0.6s ease;
  box-shadow: 5px 5px #50a
}

span {
  color: #fff;
  font-weight: bold;
  line-height: 50px;
}

#link:hover {
  border-radius: 25px;
  width: 50px;
}

<div>
  <a id="link">
    <span>text</span>
  </a>
</div>

将鼠标悬停在此按钮的右边界时，该按钮会在很短的间隔内重复膨胀和收缩。

上面上传的twitter gif中出现类似的问题。 我该如何解决这个问题？