Text not fine when applying CSS scale effect?

Question

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

I am trying to create text animate with css. when I use scale effect to text, it displaying blurry. But after finish the animation it will back 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");
}