Understanding cubic-bezier transition property in CSS

Question

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.

Cerussite

it means that if you change the 'top' property of your div (either in JS or CSS) it will happend in animated transition according to your setting – Berserker

I find the MDN document <easing-function> is helpful. – Comity

Answer 1

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.

---

---

Helpful Links

• Answer Source from this Blog

• For creating bezier transition

• Cubic bezier Builder

• understanding Curve - Mathematics

---

Direct

Actually only abscissas of P1 and P2 both need to be in the [0, 1] range. – Gintz

Answer 2

I would like to provide another explanation of cubic-bezier function by someone who just understood how it works. I had some trouble with it while going through the tutorials on https://freecodecamp.org. I grasped it after reading the previous answer by eirenaios and using the cubic-bezier builder.

Post on my blog

1. Bezier curve is based on four points: P0, P1, P2, and P3. P0 is set by default to (0, 0) and P3 is set by default to (1, 1).

2. The curve will stretch differently depending on what coordinates you give for points P1 and P2.

    Cubic-bezier example

In the example above P1 is set to (0.1, 0.1) and P2 is set to (1, 0). The speed of the animation depends on how much does the state change per given amount of time. In this example, the animation gets faster with time. For the first half of the time used for the animation, it will cover about 15% of the distance (when Time = 0.5, State ~ 0.15). It will cover the remaining 85% of the distance in the second half. 

Please check the example in jsfiddle to see how the animation works in practice: cubic-bezier ball animation

HTML:

<div class="ball"></div>

CSS:

.ball{
  background: red;
  border-radius: 50%;
  position: fixed;
  width: 50px;
  height: 50px;
  top: 50%;
  animation-name: bounce;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.10, .10, 1, 0);
}

@keyframes bounce {
  0% {
    left: 0%;
  }
  100% {
    left: 100%;
  }
}

In the example, the ball moves from the left edge of the screen to the right edge over the course of 4 seconds. Keyframes are there to set where the animation should begin and end, animation-timing-function: cubic-bezier() to set the speed of the animation at different points in time.

Shrewsbury