javascript - 在悬停时为字体大小设置动画时出现闪烁问题

Question

当鼠标悬停在上面时，我希望字体大小随着过渡而减小。但是，当鼠标悬停在上面时它会闪烁。我想摆脱闪烁。

.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>

Answer 1

更好的方法是使用 scale而不是 font-size ，像这样:

.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>