How does Cubic-Bezier work in CSS animations?
When we are going to 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 doubt is with respect to animation-timing-function and how to use the cubic-bezier(0, 0, 0, 0) to control the animation...
My doubt is what corresponds each of these 0: cubic-bezier(0, 0, 0, 0)
I did not understand very well how to change these values depending on what I see animated on the screen. I perceived values of animation-timing-function as ease, ease-in, ease-in-ou, linear they are pre - defined values and vc can not customize them, for this we have the cubic-bezier, but I did not understand how to control these values...
Code example with an animation using cubic-bezier, notice that at the end of the animation has a " bounce" and it goes back to the original point before starting. It is possible to achieve this effect only by using cubic-bezier (since it does not have a predefined value for it type o ease).
But I didn't quite understand what it really happens when I'm manipulating these numbers. I didn't quite understand how this time/progress "curve" 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>1 answers
TL; DR
The four parameters define the two control points of the Bezier Curve, P1(x1, and1) e P2(x2, and2), for Grade 3.
cubic-bezier(x1, y1, x2, y2)
A Bézier curve
The Bézier curve is a form of interpolation between a set of points and is understood by interpolation an approximation, or mean, that seeks to reproduce the same behavior presented by the interpolated points. For example, if you it has two points aligned, it can draw 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 layman's language, it would be like stating that one left point A and arrived at Point C, probably passed through point B, given that 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 two-dimensional plane;
- n is the order of the curve;
- k the sum control index;
- t a parameter used to run the curve;
A Bezier Curve Of Order n interpolates between n + 1 points.
source : examples of linear, quadratic and Bézier curves cubic.
A cubic bezier curve
The function cubic-bezier, as expected, uses the particular case of the Bézier curve for n = 3, in this way it has 4 control points - points that generate interpolated and will generate the curve. The starting point-P0, you will always be the origin (0, 0), and the end-point P -3, you will always be the point (1, 1), leaving only a set of P1 P2, it is defined exactly in the parameters of the function.
If you simplify the equation with the already known parameters, you will have:
Knowing the points P0(0, 0) e P3(1, 1), as well as The Points P1 e P2 which are defined by the parameters, we are able to plot the graph by interpolating the points.
How to calculate P1 e P2 from the chart I want to assemble?
The Points P0 e P 3 are known, so we just need to determine who is P1 e P2 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 done an answer dealing with solutions of linear systems that can be used as a basis.
The other alternative, which is usually more feasible in the vast majority of cases is trial and error. Understanding that point P1 influences the beginning of the animation and the point P2 influences the end of it, you can already position them as you wish and adjust according to your need.
Tools
Obviously you don't need make trial and error in hand. There are already tools that help you create a cubic Bézier curve.
More exist.
Examples
Ease In
The ease-in animation 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 for starting quickly and being 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>