'Getting flicker issue while animating font-size on hover

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 class="big-box">
  <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>
javascripthtmlcss


Solution 1:[1]

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 class="big-box">
  <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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions