title: CSS animation keyframe with smooth movement
body: <p>I'm doing a pendulum animation over a parachute cat (for the lol), but its more smooth when its moving to left. All ease options has the same problem as far as i can tell. I can make this in pure javascript but css used to be more smooth and less CPU consuming.</p>
  
  <p>Test: <a href="http://jsfiddle.net/sombra2eternity/qmb2qhz4/2/" rel="noreferrer">http://jsfiddle.net/sombra2eternity/qmb2qhz4/2/</a></p>
  
  <pre><code>transform-origin:50px 5px;
  transition:transform 1s ease-in-out 0s;
  animation-duration: 2.2s;
  animation-name: paragato;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  </code></pre>
  
  <p>Note: Not working at all in Firefox (33), bug opened: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1095916" rel="noreferrer">https://bugzilla.mozilla.org/show_bug.cgi?id=1095916</a></p>