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