Text not appropriate when applying CSS scale effect?

Fiddle: http://jsfiddle.net/d4hqjv3p/

I am trying to create text using css. when i use zoom effect on text it appears blurry. But after the animation finishes, it will return to clear text.

Code:

<style>
    div {
        position: absolute;
        margin:100px;
        left:0;
        top:0;
        font-size:20px;
        font-family: arial;
        -webkit-transition: all .5s;
        -moz-transition: all .5s;
    }

    .scale {
        -webkit-transform: scale(3);
        -moz-transform: scale(3);
    }
</style>

<div>5</div>
<input type="button" value="Click to Animate" onClick="clickme()" />

Script :

function clickme() {
  $("div").addClass("scale");
}