Getting flicker issue while animating font-size on hover-CodePudding

I want the font size to decrease with the transition when the mouse is hovered over. However, it flickers when hovering over the mouse. I want to get rid of flicker.

.big-box {
        display: flex;
    }
    .big-box span {
        font-size: 100px;
        transition-duration: 1s;
        white-space: pre;
    }
    .big-box span:hover {
        font-size: 50px;
    }

<div >
  <span>I</span>
  <span>T</span>
  <span> </span>
  <span>I</span>
  <span>S</span>
  <span> </span>
  <span>T</span>
  <span>E</span>
  <span>X</span>
  <span>T</span>
</div>

CodePudding user response：

A better way is to use scale instead of font-size, like so:

.big-box {
        display: flex;
    }
    .big-box span {
        font-size: 100px;
        transition-duration: 1s;
        white-space: pre;
    }
    .big-box span:hover {
      transform:scale(0.6);
    }

<div >
  <span>I</span>
  <span>T</span>
  <span> </span>
  <span>I</span>
  <span>S</span>
  <span> </span>
  <span>T</span>
  <span>E</span>
  <span>X</span>
  <span>T</span>
</div>