How does the cubic-bezier() function work?

Question

I'm currently trying to learn how to use cubic-bezier(), but I'm a bit struggling.

As far as I understood, it helps create a Bezier curve, which consists of 4 points, let's say P0, p1, p2, p3.

P0 and p3 have the coordinates (0, 0) respectively (1, 1) and they represent the starting and ending point of the curve.

X represents time, Y represents progression.

So if my function looks like

transition-timing-function: cubic-bezier(0.7, 0.2, 1, 1);

shouldn't my animation be really slow until 7/10 of the transition-time (so at 7/10 of the transition-time I get 0.2 of the progression) and very fast for the rest of the time? (so the part from 7/10 -> 10/10 of the time should have 0.8 of the animation - so it should be pretty fast)

That's how I assume it is working and actually it doesn't. Here's my code

.transitionTest {
    width: 200px;
    height: 200px;
    background-color: blue;
    margin: 100px 0 0 100px;
    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: cubic-bezier(0.7, 0.2, 1, 1);
}

.transitionTest:hover {
    transform: rotate(180deg);
    background-color: red;
    width: 100px;
    height: 100px;
}

Also, what happens if I use negative values in this function?

user_8620333 · Answer

shouldn't my animation be really slow until 7/10 of the transition-time (so at 7/10 of the transition-time I get 0.2 of the progression) and very fast for the rest of the time?

Not really, because the points will not define the calculation but will define the curve and then you need to consider the curve to find the progression. Here is the bezier curve you will have with your points:

The black curved line is your animation and you will be a bit slow at the start. At around 70% of the time You will reach 50% of the animation and the other 50% will be from 70% to 100%.

To get what you want (20% at the 70%) you need something like below

.box {
  width: 200px;
  height: 200px;
  background-color: blue;
  margin: 100px 0 0 100px;
  transition-property: all;
  transition-duration: 2s;
  transition-timing-function: cubic-bezier(0.6, 0.05, 1, 0.2);
}

.box:hover {
  transform: rotate(180deg);
  background-color: red;
  width: 100px;
  height: 100px;
}

Of course, it's not the only combination to get the desired effect. There is a plenty of combination to obtain it.

Related question to get more details around the calculation: When exactly does an ease animation reach its midpoint?

A useful online tool to draw your curve and easily understand what is happening: https://www.desmos.com/calculator/d1ofwre0fr?lang=fr

Another one: https://cubic-bezier.com/

Also, what happens if I use negative values in this function?

Nothing special. Your points will be outside the area (0,0) (1,1) and we draw the curve the same way. Example:

.box {
  width: 200px;
  height: 200px;
  background-color: blue;
  margin: 100px 0 0 100px;
  transition-property: all;
  transition-duration: 2s;
  transition-timing-function: cubic-bezier(0, 0, 0, -1);
}

.box:hover {
  transform: rotate(180deg);
  background-color: red;
  width: 100px;
  height: 100px;
}

How does the cubic-bezier() function work?

1 Answers