複数の変更中にCSSのトランジションがちらつく

Question

要するに、ボトムの境界が暗いボタンがあります。ホバーでは、ボタンを少し下に移動して（ボタンを押したままにする）ボーダーを縮小します。

しかし、アニメーションのようにわずかにジッタがあり、ボタン「押さ」の感触を完全に消滅させます。

.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のような接頭辞を使用していない。ここで

は、問題のCSSとともに、問題を実証Fiddleです。

主な問題はボトムボーダーです。ボタンは下に滑り落ちますが、境界線は違ったことをしているように見えます（滑らかではありません）。

ここに任意のアイデアはありますか？

Answer 1

::before擬似要素と下の枠線を交換し、それがscaleプロパティのアニメーション化も、transform: translateY(2px)とtop推移を交換しよう：

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); 
}