悬停具有框阴影过渡和变换动画的元素时的总重绘

Question

我观察到奇怪的效果：悬停带有旋转图标（字体超赞）的按钮会导致屏幕上所有按钮的重新绘制：

也应将box-shadow的鼠标悬停在过渡上。字体真棒CSS的动画定义：

@keyframes fa-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(359deg); }
}

button {
  transition: box-shadow 250ms;
}

button:hover {
    box-shadow: 0 2px 2px 0 rgba(140, 140, 140, 0.5);
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<button>Button</button>
<button>Button</button>
<button>Button</button>
<button><i class="fa fa-user"></i>Button</button>
<button><i class="fa fa-user"></i>Button</button>
<button><i class="fa fa-user"></i>Button</button>
<button><i class="fa fa-spin fa-user"></i>Button</button>
<button><i class="fa fa-spin fa-user"></i>Button</button>
<button><i class="fa fa-spin fa-user"></i>Button</button>

任何人都可以解释造成这种情况的原因。谢谢。