How does Cubic-Bezier work in CSS Animations?

Question

When we make an animation with CSS we have several parameters that we can use.

Ex:

animation-name: none
animation-duration: 0s
animation-timing-function: ease
animation-delay: 0s
animation-iteration-count: 1
animation-direction: normal
animation-fill-mode: none
animation-play-state: running

My question is about animation-timing-function and how to use the cubic-bezier(0, 0, 0, 0) to control the animation...

My doubt is what each of these 0: cubic-bezier(0, 0, 0, 0)
I did not understand very well how to change these values according to what I see animated on the screen. I realized values of animation-timing-function as ease, ease-in, ease-in-ou, linear are predefined values and you can not customize them, for this we have the cubic-bezier, but I didn’t understand how to control these values...

Code example with an animation using cubic-bezier, notice that at the end of the animation has a "ounce" and it goes back to the original point before starting. It is only possible to achieve this effect using cubic-bezier (since it does not have a predefined value for it type o ease).

But I don’t really understand what happens when I’m manipulating these numbers. I don’t quite understand how this "curve" of time/progress works.

.box {
	width: 100px;
	height: 100px;
	background-color: red;

	animation: 
                    box 
                    2s 
                    infinite 
                    alternate 
                    cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes box {
	to {
		margin-left: 50%;
	}
}

	

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

Answer 1

TL;DR

The four parameters define the two control points of the Bézier curve, P₁(x₁, y₁) and P₂(x₂, y₂), to grade 3.

cubic-bezier(x1, y1, x2, y2)

The Curve of Bézier

The Bézier curve is a form of interpolation between a set of points and is understood by interpolation an approximation, or average, that seeks to reproduce the same behavior presented by the interpolated points. For example, if you have two aligned points, you can trace a line segment between them, estimating that all the intermediate points have the same behavior as the two points that originated the line segment; this estimate is what we call interpolation. In a more lay language, it would be like saying that if you left point A and arrived at point C, you probably passed point B, since B is between A and C.

Mathematically, the Bézier curve is represented by:

Where:

• (x, y) is the point of the curve in a bi-dimensional plane;
• n is the order of the curve;
• k the sum control index;
• t a parameter used to traverse the curve;

A Bézier curve of order n interpolates between n+1 points.

^{Source: examples of linear, quadratic and cubic Bézier curves.}

The Curve of Cubic Bézier

The function cubic-bezier, as expected, it uses the particular case of the Bézier curve for n = 3, thus having 4 control points - points that generate interpolated and generate the curve. The starting point, P₀, will always be the origin, (0, 0), already the end point, P₃, shall always be point (1, 1), leaving only P points₁ and P₂, which are precisely defined in the function parameters.

If you simplify the equation with the known parameters, you will have:

Knowing the P points₀(0, 0) and P₃(1, 1), as well as points P₁ and P₂ which are defined by the parameters, we are able to plot the graph interpolating the points.

How to calculate P₁ and P₂ from the chart I wish to mount?

The points P₀ and P₃ are known, so we just need to determine who is P₁ and P₂ to define the parameters of the equation.

One of the ways to do this is to put together a system of equations. Remembering that each point is composed of two dimensions, we will have the challenge of determining the value of four variables. Knowing the values of B(t) where you want the curve to go, you can solve the system for these variables.

The Jefferson Quesado has already done a response dealing with linear system solutions which can be used as a basis.

The other alternative, which is usually more viable in the vast majority of cases is trial and error. Understanding that point P₁ influences the beginning of the animation and the P point₂ influences the end of it, you can already position them as you wish and adjust as you need.

Tools

Obviously you don’t need to make the trial and error in the hand. There are already tools that help you in creating a cubic Bézier Curve.

• http://cubic-bezier.com

Other more exist.

Examples

---

Ease In

The animation ease-in is known to start slowly and be faster at the end.

#animations:hover .box {
  width: 100%;
}

.box {
  width: 0;
  height: 20px;
  background-color: red;
  transition: width 2s;
}

.box.ease-in {
  transition-timing-function: ease-in;
}

.box.cubic-bezier {
  transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
}

section > section {
  margin-bottom: 20px;
}

<section id="animations">
  <header>
    <h1>Ease In</h1>
  </header>
  <section>
    <strong>Animação ease-in do navegador</strong>
    <pre>transition-timing-function: ease-in</pre>
    <div class="space">
      <div class="box ease-in"></div>
    </div>
  </section>
  
  <section>
    <strong>Animação ease-in definida pelo Google Material</strong>
    <pre>transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);</pre>
    <div class="space">
      <div class="box cubic-bezier"></div>
    </div>
  </section>
</section>

---

Ease Out

The animation ease-out is known to start quickly and be slower at the end.

#animations:hover .box {
  width: 100%;
}

.box {
  width: 0;
  height: 20px;
  background-color: red;
  transition: width 2s;
}

.box.ease-out {
  transition-timing-function: ease-out;
}

.box.cubic-bezier {
  transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}

section > section {
  margin-bottom: 20px;
}

<section id="animations">
  <header>
    <h1>Ease Out</h1>
  </header>
  <section>
    <strong>Animação ease-out do navegador</strong>
    <pre>transition-timing-function: ease-out</pre>
    <div class="space">
      <div class="box ease-out"></div>
    </div>
  </section>
  
  <section>
    <strong>Animação ease-out definida pelo Google Material</strong>
    <pre>transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);</pre>
    <div class="space">
      <div class="box cubic-bezier"></div>
    </div>
  </section>
</section>