CODEWITHSUNDEEP
javascripthtmlcssanimation
Marcos Fernandez Ramos
Marcos Fernandez Ramos

Reputation: 677

CSS animation keyframe with smooth movement

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.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;

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

Upvotes: 9

Views: 26861

Answers (1)

CupawnTae
CupawnTae

Reputation: 14580

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.net/ww31468f/

Upvotes: 8

Related Questions