This question already has an answer here:
As you can see in the snippet below, the hello text becomes blurry during the scaling process (but not when it's fully scaled up). Is there any way to prevent that?
.hello {
display: flex;
justify-content: center;
align-items: center;
margin: 0px 20px 10px 20px;
transition: all .2s linear;
}
.hello:hover {
transform: scale(1.1);
}<div class='hello'><p>Hello</p></div>