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

问题

I wanted to create a "bouncy" animation for an 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 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: http://cubic-bezier.com/#.57,.07,.44,2 )

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%.

The expected behaviour using cubic-bezier() would be that the scale() property grows past 1 and then comes back to 1, creating a "bounce" effect. This works for other properties (such as padding, left, margin) but not for the scale transform.

This doesn't happen on Chrome (28.0.1500.71 m, Windows 7 64bit). Wokrs OK on Firefox and IE10

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

Thank you

回答1:

It's working fine with the current Chrome Canary build 30.0.1561.0, so it looks like it's this bug: https://code.google.com/p/chromium/issues/detail?id=178299 It causes the value to get clamped between 0 and 1 for transforms.

There doesn't seem to be a workaround, other than using precalculated animations. Try for example http://www.css3animationgenerator.com/

来源：https://stackoverflow.com/questions/17582498/webkit-css3-2d-transform-scale-cubic-bezier-issue-when-argument-1

标签

css

webkit

css-transitions

css-transforms