title: Best way to animate a transform scale
body: <p>I'm looking to do a simple effect of crushing some text.  Only problem is, when I scale along the Y axis, it squeezes from top and bottom, leaving a strange floating squeezed element.</p>
  
  <pre><code>@-webkit-keyframes crush_head {
      from {
          -webkit-transform:scaleY(1); /* Safari and Chrome */
      }
      to {
          -webkit-transform:scaleY(0.5); /* Safari and Chrome */
      }
  }
  </code></pre>
  
  <p>I want to squeeze this puppy DOWN like it's getting a weight dropped on it's head.  NOT just from both sides.  Any idea how to achieve the desired effect?</p>
  
  <p>Attached is a fiddle of how I'm currently doing this.
  <a href="http://jsfiddle.net/54A9M/" rel="nofollow">http://jsfiddle.net/54A9M/</a></p>