CSS动画关键帧，运动流畅

Question

我正在对降落伞猫（对于lol）进行钟摆动画，但是当它向左移动时它更加平滑。就我所知，所有轻松选项都有同样的问题。我可以在纯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/