平滑运动的CSS动画关键帧

Question

我正在为降落伞猫做一个摆动动画（对于哈哈），但是它向左移动时更加平滑。据我所知，所有简易选项都有同样的问题。我可以在纯JavaScript中做到这一点，但过去使用css更平滑，CPU消耗更少。

测试：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; 

注意：不能在Firefox（33）在所有的工作，错误打开：https://bugzilla.mozilla.org/show_bug.cgi?id=1095916

Answer 1

您需要添加

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

的transition定时功能不适用于动画，因此您的测试没有显示任何差异。并且你想让ease-in-out在两端得到平滑。

http://jsfiddle.net/ww31468f/