When I use scale transform to zoom a div in HTML, the text inside becomes blurred. Is there a solution to make the text clear like the original?
@keyframes scaleText {
from {
transform: scale(0.5, 0.5);
}
to {
transform: scale(2, 2);
}
}
#para1Six {
color: black;
text-align: center;
-webkit-font-smoothing: antialiased;
font-size: 19px;
font-family: 'Sacramento', cursive;
z-index: 2;
}
#wrapper
{
width: 500px;
margin: 0 auto;
animation-name: scaleText;
animation-duration: 1s;
animation-fill-mode: forwards;
}<div id="wrapper">
<div class="envelope open">
<div class="flap front"></div>
<div class="flap top"></div>
<div class="letter">
<p id="para1Six">
Hello World
</p>
</div>
</div>