21
Oct

Some notes on bouncy CSS transitions

Earlier this year the CSS transitions specification was rewritten so that transitions with a custom timing function (using cubic-bezier) would no longer be clamped between the start and end values, making it possible to add a rubber-band bounce to your transitions. Opera and Firefox already implemented this, and recently the related WebKit bug was fixed, so we can start experimenting with bouncy transitions now!
This rubber-band bouncing doesn’t only work for things like position and transform, it equally applies to animated colors, shadows, borders, font-sizes, etc. Of course, transitions won’t extend across minimum or maximum values – you can’t go darker than rgb(0,0,0) for example.
If you need real bouncing though – with more than one bounce – you’ll still have to use keyframe animations, as cubic-bezier curves only take two user-defined control points. Dan Eden made a nice library of ready-made animations to drop into your project. Apparently browser vendors and spec writers are currently looking into defining more timing functions like bounce however.
If you want to play around with cubic-bezier curves look no further than Cubic-Bezier or Ceaser, two essential tools to comprehend and play with CSS timing functions.