About animation (css) | SoloLearn: Learn to code for FREE!


About animation (css)

HELP🙁 Anyone know what are the purpose of those 4 numbers inside? transition-timing-function: cubic-bezier ( .25 , .50 , .75 , 1); Here is the link to that lesson https://www.sololearn.com/learn/CSS/2249/ Thank you😁

7/5/2019 9:26:08 PM

🐧Daniel [I use Arch BTW]

4 Answers

New Answer


cubic-bezier(P1x , P1y , P2x , P2y) The four values represent two points on a curve. The x values represent time and the y values represent the change in property. Your defined values in the function can be between 0 and 1. This is because there are also points P0 and P3, which are always at (0 , 0) and (1, 1), respectively. You can play around with different values in a cubic-bezier curve here: https://cubic-bezier.com/#.17,.67,.83,.67


Thank you Chris C.


Thank you Jenna 😃


I think they have something to do with the speed of which an object moves, at a certain point in time. This can describe it better than I can https://www.hongkiat.com/blog/css-cubic-bezier/