Understanding cubic-bezier transition property in CSS
I have a div which contains a some slides and menu.
Can anyone explain to me what the transition property does here?
I am not able to understand the effect it's going to produce on the div.
Answer
Answer for your question
that property is for the animation of <div id="wrap"></div>.
It means it will animate using top property!
And for Effect: It will Bounce like This Will Be the transition Effect
Understanding CSS cubic-bezier
It takes four parameters:
cubic-bezier(P1x,P1y,P2x,P2y)
what do these do?
Well, these map to points, and these points are part of a Bézier curve:
So there are 4 points, but the function only mentions P1, and P2 with their corresponding X and Y values?
For CSS Bézier Curves, P0 and P3 are always in the same spot. P0 is at (0,0) and P3 is at (1,1). An important thing to note is that the points that get passed in the cubic-bezier function can only be between 0 and 1. So if you decide to try something like
cubic-bezier(2,3,5,2), you’ll be banished to linear easing, the worst of all easing functions. That’s like a font-family falling back to Comic Sans.Also notice that the x-axis is the time the animation takes, and the y-axis is the property being changed. Based on the graph above you can visualize it easing quickly in the beginning, slowing down in the middle, and picking up speed at the end.