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;
}

<div class="transitionTest"></div>

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

Sorry, but could you show us the expected result so we can understand your problem. Because for me your code work just fine. — Ahmad Dalao, Sep 10 '20 at 08:30

Temani Afif · Accepted Answer · 2020-09-10T11:09:05.943

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;
}

<div class="box"></div>

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;
}

<div class="box"></div>

Hm, I understand. So basically I shouldn't think about the values in the way I did - I need to see how the curve looks. — Octavian Niculescu, Sep 10 '20 at 08:34
@JohnSmith yes exactly, the curve will give you the output, not the values. The values will only draw the curve — Temani Afif, Sep 10 '20 at 08:35
I got it. Thanks for your time. How do you use it yourself? If, let's say, you wanted to get the combination that I've said in my post. How would you start projecting it? — Octavian Niculescu, Sep 10 '20 at 08:35
@JohnSmith use the tool I provided in the last link .. you put your 4 points (the two fixed one at (0,0) and (1,1)) and then you start playing with other two and adjust them. You will see the output changing with the points and you stop them when you get the need result .... the math behind is a bit complex so better rely on such visual tool to get what you want — Temani Afif, Sep 10 '20 at 08:37
But how did you know that you need to use those 2 points (in the last picture) to get the effect I wanted? — Octavian Niculescu, Sep 10 '20 at 08:38
@JohnSmith it was an example ... I changed the points until I get the curve I wanted. I know that at my curve need to go through the point (0,7.0.2) which is 20% of the progression at 70% of time then I simply changed the point to have it ... here is another tool easier made for CSS: https://cubic-bezier.com/ — Temani Afif, Sep 10 '20 at 08:40

How does the cubic-bezier() function work?

1 Answers1

Linked