CODEWITHSUNDEEP
csswebkitcss-transitionscss-transforms
Nahuel
Nahuel

Reputation: 3585

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

Upvotes: 3

Views: 2215

Answers (1)

ndm
ndm

Reputation: 60463

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/

Upvotes: 1

Related Questions