Elastic easing in CSS3, best approach

Question

I\'d like to emulate an elastic easing function in CSS3. CSS3 does not support this natively, so I\'ve been coming up with my own keyframes, and it looks okay, but

Answer 1

Depending on your browser limitations (and if you're using CSS3 you should be ok regardless), you can actually apply easing transitions with the cubic-bezier() keyword instead.

An example animation would look like this:

transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
transition-duration: 2.9s;

Lea Verou's blog post covers this pretty well.

Answer 2

Lots of great cubic-bezier transitions available here:

http://easings.net/

Something like this might be what you want:

transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);