CSS 过渡在多次更改期间闪烁

Question

简而言之，我有一个底部边框较暗的按钮，在悬停时，我希望按钮向下移动一点并缩小边框(以产生按下它的效果)。

但是，它在动画时会轻微抖动，完全消除了“按下”按钮的感觉。

这是一个 Fiddle 演示问题以及有问题的 CSS:

.btn {
  color: grey;
  background: lightgrey;
  border: 0 rgba(0, 0, 0, .1) solid;
  border-bottom-width: 4px;
  font-family: sans-serif;
  padding: 10px;
  position: relative;
  text-decoration: none;
  top: 0;
  transition: all 250ms;
}

.btn:hover {
  top: 2px;
  border-bottom-width: 2px;
}

为了简单起见，我在这里没有使用像 -webkit 这样的前缀。

主要问题是底部边框。按钮可以很好地向下滑动，但边框似乎在做一些不同的事情(并且不平滑)。

这里有什么想法吗？

Answer 1

尝试用 transform: translateY(2px) 替换 top transition，同时用 ::before 伪元素替换 bottom border并为它的 scale 属性设置动画:

https://jsfiddle.net/qjfstq1c/1/

.btn, .btn:before {
   transition: all 250ms;
   transform-origin: top center;
 }
.btn {
  display: inline-block;
  color: grey;
  background: lightgrey;
  font-family: sans-serif;
  padding: 10px;
  position: relative;
  text-decoration: none;
}
.btn:before {
  content: '';
  position: absolute;
  top: 100%; left: 0; right: 0;
  border-top: 4px solid #bebebe;
}
.btn:hover {
  transform: translateY(2px);
}
.btn:hover:before {
  transform: scaleY(.5);
}