Ease from 0% to 100% only

Question

Is there a way to skip all the frames between 0 and 100 in CSS and ease directly to the end?

If I make an animation move 5s ease infinite and in the keyframes i say something like this:
0% { margin-left:0; }
25% { margin-left:25px; }
50% { margin-left:50px; }
75% { margin-left:25px; }
100% {margin-left:0; }

If I use ease it eases from 0 to 25, from 25 to 50 and so on

Or check this code on the .line class and see what I mean. Is there a way to let the line move smoothly eased from 0 to 100?

https://code.sololearn.com/WEUG5L5L7h9l/?ref=app

Answer 1

Maths says the bar moves like a cosine in the x direction and like a sine in the y direction since it's attached to a circle.

So instead of linear easing you need an easing function that moves like a sine wave. There is none but you can get close: https://easings.net/#easeInOutSine

So you need to replace your single `line` animation with two animations, say `linex` and `liney` that use the easing function above. Each of these `@keyframe` definitions have at 0% the max value and at 50% the min value.

However, the `liney` starts a quarter turn after `linex` (cosine is just sine but offset). So you need a third animation that only runs once and does the first quarter turn smoothly; the same website also has easeOutSine which you can use.

So you end up with something like

animation: linex 5s cubic-bezier(...) infinite, liney 5s 1.25s cubic-bezier(...) infinite, liney_start 1.25s cubic-bezier(...) 1;

EDIT: I don't have time to get it pixel perfect, but here:
https://code.sololearn.com/WVv1FO8jsyua/?ref=app

Answer 2

a supplement to Schin's answer:
https://developers.google.com/web/fundamentals/design-and-ux/animations/the-basics-of-easing

Answer 3

It seems to me that using linear like you are would be better anyway. The purpose of ease is slow-fast-slow-fast and so on and as such it won't be as smooth as linear for a circular motion 🤔.

Pistons generally move at a steady pace in order for the wheel to steadily spin anyway I believe. Unless you are purposely going for that slow-fast-slow look

https://www.google.com/search?q=piston+animation+gif&client=ms-android-verizon&prmd=ivsn&source=lnms&tbm=isch&sa=X&ved=2ahUKEwij69DniKHiAhXFY98KHVZ3BYgQ_AUoAXoECAwQAQ&biw=412&bih=604&dpr=2.63