Webkit: CSS3 2D transform Scale + cubic bezier issue (when argument > 1) -

i wanted create "bouncy" animation element using:

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

fairly simple. using scale transform, hide element (or scale down whatever want). assign transition property using cubic-bezier last argument 2 (see curve here: http://cubic-bezier.com/#.57,.07,.44,2 )

then, on second stage (could on hover or activated else, 'fired' class) scale 100%.

the expected behaviour using cubic-bezier() scale() property grows past 1 , comes 1, creating "bounce" effect. works other properties (such padding, left, margin) not scale transform.

this doesn't happen on chrome (28.0.1500.71 m, windows 7 64bit). wokrs ok on firefox , ie10

see example here: http://codepen.io/anon/pen/oiexl

thank you

it's working fine current chrome canary build 30.0.1561.0, looks it's bug: https://code.google.com/p/chromium/issues/detail?id=178299 causes value clamped between 0 , 1 transforms.

there doesn't seem workaround, other using precalculated animations. try example http://www.css3animationgenerator.com/