Question

185

CSS animation keyframe with smooth movement

rated 0 times [ 186] [ 1] / answers: 1 / hits: 22968 / 10 Years ago, sat, november 8, 2014, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kieraelsies

Add To Favorites

Follow

Total Points: 718

Total Questions: 103

Total Answers: 104

Location: England

Member since Sun, May 21, 2023

1 Year ago

kieraelsies questions

1 How do I change text color in SweetAlert2?

Tue, Aug 3, 21, 00:00, 3 Years ago

1 Tailwind Custom Colors Not Complied

Tue, Feb 23, 21, 00:00, 3 Years ago

1 How to write inline onclick function as es6 arrow function?

Thu, Nov 12, 20, 00:00, 4 Years ago

1 How to remove all roles from an user discord.js v12?

Wed, Sep 9, 20, 00:00, 4 Years ago

1 PlusMinus Challenge

Mon, Sep 16, 19, 00:00, 5 Years ago

View All

answered 10 Years ago jarrettw · Accepted Answer

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/