title: How to get a gravity effect in a CSS animation?
body: <p>I want to animate an element as if you're looking down at the Earth. The element jumps towards you, hits its apex, and falls back down a little. A side view of the trajectory would be like this:</p>
  
  <pre><code>     _
     /   \
    /     |
   |
   |
  </code></pre>
  
  <p>I wasn't able to attain a realistic effect with keyframe animations. Mine looks artificial like this:</p>
  
  <pre><code>    /\
     /  \
    /
   /
  /
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>@keyframes springIn {
      0% {
          transform: scale(0.0);
      }
      80% {
          transform: scale(1.2);
      }
      100% {
          transform: scale(1.0);
      }
  }
  
  .someElement {
      animation: springIn 1s linear 1s 1 forwards;
  }
  </code></pre>
  
  <p>How do you put parabolic function on the animation to get the gravity effect? I thought I could use <a href="http://css3beziercurve.net/" rel="noreferrer">Bezier Curves</a>, but the CSS standard does not allow points outside of [0, 0].</p>