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