Understanding cubic-bezier transition property in CSS

I have a div which contains a some slides and menu.

#wrap {
    position: relative;
    top: 0;
    transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);
}

<div id="wrap"></div>

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.

Solution

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)

points cubucB

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.