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）中完全无法工作，已经开了一个bug：https://bugzilla.mozilla.org/show_bug.cgi?id=1095916

- Marcos Fernandez Ramos

Answer 1

您需要添加

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

transition的时间函数未应用于动画，因此您的测试未显示任何差异。您需要使用ease-in-out来使其在两端平滑过渡。

http://jsfiddle.net/ww31468f/

- CupawnTae

---

如果某个答案解决了您的问题，您可以点击答案左侧的复选标记将其标记为正确。两个人都将获得一些声望。 - Zach Saucier