css - 変換スケールをアニメートする最良の方法

Question

テキストを押しつぶすという単純な効果を探しています。唯一の問題は、Y 軸に沿ってスケーリングすると、上から下に押しつぶされて、奇妙なフローティングの押しつぶされた要素が残ることです。

@-webkit-keyframes crush_head {
    from {
        -webkit-transform:scaleY(1); /* Safari and Chrome */
    }
    to {
        -webkit-transform:scaleY(0.5); /* Safari and Chrome */
    }
}

頭からおもりが落ちるように、この子犬を押し倒したい。両側からだけではありません。望ましい効果を達成する方法はありますか？

添付されているのは、私が現在これをどのように行っているかのフィドルです。 http://jsfiddle.net/54A9M/