Quiero que el tamaño de la fuente disminuya con la transición cuando se pasa el mouse sobre ella. Sin embargo, parpadea al pasar el ratón por encima. Quiero deshacerme del parpadeo.
.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>Una mejor manera es usar scale en lugar de font-size , así:
.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>