Ease from 0% to 100% only | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 3

Ease from 0% to 100% only

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

16th May 2019, 8:56 PM
Roel
Roel - avatar
3 Answers
+ 6
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
17th May 2019, 12:55 AM
Schindlabua
Schindlabua - avatar
17th May 2019, 12:01 PM
Gordon
Gordon - avatar
+ 2
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
16th May 2019, 10:13 PM
Decimis † 𝕯𝖊𝖈𝖎𝖒𝖎𝖘
Decimis † 𝕯𝖊𝖈𝖎𝖒𝖎𝖘 - avatar