title: CSS Animation: different cubic-bezier
body: <p>I have a simple animation which I want to “overshoot” when it gets to the end. Then it should reverse and “overshoot” at the other end.</p>
  
  <p>The code looks something like this:</p>
  
  <pre><code>h1 {
      animation-name: test 3000ms infinite alternate;
      animation-timing-function: cubic-bezier(0.300, -0.530, 0.765, 1.530);
  }
  @keyframes test {
      from {
          transform: translate(0,0);
      }
      to {
          transform: translate(100px,0);
      }
  }
  </code></pre>
  
  <p>The problem is that the animation also “undershoots” at the beginning of each iteration.</p>
  
  <p>How do I apply a an <code>animation-timing-function</code> in one direction only?, and a different one in the other direction?</p>
  
  <p>Thanks</p>