I'm doing a pendulum animation over a parachute cat (for the lol), but its more smooth when its moving to left. All ease options has the same problem as far as i can tell. I can make this in pure javascript but css used to be more smooth and less CPU consuming.

Test: /

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;

Note: Not working at all in Firefox (33), bug opened: .cgi?id=1095916

I'm doing a pendulum animation over a parachute cat (for the lol), but its more smooth when its moving to left. All ease options has the same problem as far as i can tell. I can make this in pure javascript but css used to be more smooth and less CPU consuming.

Test: http://jsfiddle/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;

Note: Not working at all in Firefox (33), bug opened: https://bugzilla.mozilla/show_bug.cgi?id=1095916

• javascript
• html
• css
• animation

1 Answer 1

You need to add

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

The transition timing function is not applied to the animation, hence your tests not showing any differences. And you want ease-in-out to get it smooth at both ends.

http://jsfiddle/ww31468f/