title: Webkit: CSS3 2D transform Scale + cubic bezier issue (when argument > 1)
body: <p>I wanted to create a "bouncy" animation for an element using:</p>
  
  <pre><code>div{
  
    -webkit-transform:scale(0);
    -moz-transform:scale(0);
    -ms-transform:scale(0);
  
    -webkit-transition:all 0.4s cubic-bezier(0.57, 0.07, 0.44, 2);
    -moz-transition:all 0.4s cubic-bezier(0.57, 0.07, 0.44, 2);
    -ms-transition:all 0.4s cubic-bezier(0.57, 0.07, 0.44, 2);
  }
  div.fire{
  
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
  }
  </code></pre>
  
  <p>Fairly simple. Using the scale transform, I hide the element completely (or scale it down to whatever I want). Then I assign a transition property using cubic-bezier with the last argument 2 (see the curve here: <a href="http://cubic-bezier.com/#.57,.07,.44,2" rel="nofollow">http://cubic-bezier.com/#.57,.07,.44,2</a> )</p>
  
  <p>Then, on a second stage (could be on hover or activated by something else, I get the 'fired' class) I scale it up to 100%. </p>
  
  <p>The expected behaviour using <code>cubic-bezier()</code> would be that the <code>scale()</code> property grows past 1 and then comes back to 1, creating a "bounce" effect. This works for other properties (such as <code>padding</code>, <code>left</code>, <code>margin</code>) but not for the scale transform.</p>
  
  <p>This doesn't happen on Chrome (28.0.1500.71 m, Windows 7 64bit).
  Wokrs OK on Firefox and IE10</p>
  
  <p>See example here:
  <a href="http://codepen.io/anon/pen/oiexl" rel="nofollow">http://codepen.io/anon/pen/oiexl</a></p>
  
  <p>Thank you</p>