平滑移动的 CSS 动画关键帧答案

【问题标题】：CSS animation keyframe with smooth movement平滑移动的 CSS 动画关键帧
【发布时间】：2015-01-05 08:19:04
【问题描述】：

我在降落伞猫上做一个钟摆动画（为了哈哈），但是当它向左移动时它更平滑。据我所知，所有轻松选项都有相同的问题。我可以用纯 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

【问题讨论】：

标签： javascript html css animation

【解决方案1】：

你需要添加

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

transition 计时函数未应用于动画，因此您的测试没有显示任何差异。并且您希望ease-in-out 两端都顺利。

http://jsfiddle.net/ww31468f/

【讨论】：

@MarcosFernandezRamos 如果答案解决了您的问题，您可以单击答案左侧的复选标记将其标记为正确。然后两个人都会获得一些声誉