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 not perfectly natural.

I do NOT want a solution that requires any additional JavaScript scripts. All of the other posts on StackOverflow have JS solutions accepted.

What's the best way to implement elastic easing in pure CSS3?

Here's my work so far, if that helps anybody...

https://jsfiddle.net/407rhhnL/1/

I'm animating the red, green, and blue isometric rectangular prisms. I've simulated an elastic easing manually by hardcoding the following CSS3 keyframes:

@include keyframes(popup) {
  0% {

  }

  20% {
    transform: translateY(-50px);
  }

  40% {
    transform: translateY(20px);
  }

  60% {
    transform: translateY(-6px);
  }

  90% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(0px);
  }
}

I'm not looking for suggestions on tweaking this code, I'd like to know if there's a better solution than hard coding.

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);