加上一个动画的延迟，当你快速的hover的时候，上一个动画还没有开始，就被下一个覆盖掉了。

<style>
button {
    padding: 10px;
    border: 2px solid #f7f7f7;
    text-align: center;
    transition: 0.3s;
 background:#f50;
}
button:hover {
    color: #fff;
}


 button {   
        transition:  0.3s 0.1s;
     }
</style>
<button>hover</button>

 

设置的延迟是0.1s，面对快速的抖动只有最后鼠标停下来