CSS animation keyframe with smooth movement

Question

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.

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: Not working at all in Firefox (33), bug opened: https://bugzilla.mozilla.org/show_bug.cgi?id=1095916

Solution

You need to add

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

The transition timing function is not applied to the animation, hence your tests not showing any differences. And you want ease-in-out to get it smooth at both ends.

http://jsfiddle.net/ww31468f/

Comments

[Zach Saucier]

@MarcosFernandezRamos If an answer solves your issue, you can click the check mark to the left of the answer to mark it as correct. Both people will then receive some reputation