+ 13

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😁

5th Jul 2019, 9:26 PM
KingDaniel2004
KingDaniel2004 - avatar
4 Answers
+ 9
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
5th Jul 2019, 9:51 PM
Jennifer Cramer
Jennifer Cramer - avatar
+ 9
Thank you Chris C.
5th Jul 2019, 9:46 PM
KingDaniel2004
KingDaniel2004 - avatar
+ 8
Thank you Jenna 😃
5th Jul 2019, 10:00 PM
KingDaniel2004
KingDaniel2004 - avatar
+ 3
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/
5th Jul 2019, 9:44 PM
Chris Coder
Chris Coder - avatar