CSS motion keyframe with smooth motion

Question

I am doing a pendulum animation over a parachute cat (for lol), but its smoother when it moves to the left. As far as I know, all relief options have the same problem. I can do this in pure javascript, but css was smoother and less CPU consuming.

Test: http://jsfiddle.net/sombra2eternity/qmb2qhz4/2/

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;

Note. Doesn't work at all in Firefox (33), the error is open: https://bugzilla.mozilla.org/show_bug.cgi?id=1095916

Answer 1

You need to add

animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;

transition , . , ease-in-out .

http://jsfiddle.net/ww31468f/