javascript - 具有流畅运动的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/