title: Elastic easing in CSS3, best approach
body: <p>I'd like to emulate an <a href="http://easings.net/#easeOutElastic" rel="noreferrer">elastic easing function</a> in CSS3. CSS3 does not support this natively, so I've been coming up with my own keyframes, and it looks <em>okay</em>, but not perfectly natural.</p>
  
  <p>I do NOT want a solution that requires any additional JavaScript scripts. All of the other posts on StackOverflow have JS solutions accepted.</p>
  
  <p>What's the best way to implement elastic easing in pure CSS3?</p>
  
  <p>Here's my work so far, if that helps anybody...</p>
  
  <p><a href="https://jsfiddle.net/407rhhnL/1/" rel="noreferrer">https://jsfiddle.net/407rhhnL/1/</a></p>
  
  <p>I'm animating the red, green, and blue isometric rectangular prisms. I've simulated an elastic easing manually by hardcoding the following CSS3 keyframes:</p>
  
  <pre><code>@include keyframes(popup) {
    0% {
  
    }
  
    20% {
      transform: translateY(-50px);
    }
  
    40% {
      transform: translateY(20px);
    }
  
    60% {
      transform: translateY(-6px);
    }
  
    90% {
      transform: translateY(0px);
    }
  
    100% {
      transform: translateY(0px);
    }
  }
  </code></pre>
  
  <p>I'm not looking for suggestions on tweaking this code, I'd like to know if there's a better solution than hard coding.</p>