平滑運動的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/