应用CSS缩放效果时文字不正确？

Question

小提琴：http://jsfiddle.net/d4hqjv3p/

我正在尝试使用css创建文本动画。当我使用缩放效果文本时，它显示模糊。但在完成动画后，它将返回到明文。

代码：

<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");
}