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/