一种鼠标划过文字放大的CSS特效 而引发的疑惑

先上效果图，有两种，

这种是使用transform来改变大小缩放

这种是改变文字大小来缩放，会引起排版变化

在使用transform时，能明显感到比使用改变文字大小时更卡顿，并且浏览器的窗口越大，卡顿越明显。
当时我心中就很疑惑，单就从我之前学到的浏览器的渲染机制上来说，改变文字大小是会触发回流的，使用transform时不会触发回流，为什么使用transform会更卡呢？另外网页内没有什么其他内容，回流引起的卡顿应该不大。

经过我的研究（瞎猜），原来是我添加了文字阴影，当我去掉文字阴影时，明显就不卡顿了。

使用改变文字大小的方式时，不会影响到文字阴影的动画。

然而使用transform时，改变的是整个span的大小，同时也就会影响到文字阴影的大小，浏览器需要处理更多的计算量。另外如果在animation里同时把文字放大的话，会加倍放大。

源码如下

   <style>
    body {
   
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100vw;
      height: 100vh;
      background-color: #3498db;
    }

    body>div