0
I’m not quite sure how to change the speed of the animation along, in which it’s being executed. The graphic below is illustrating a valocity of animation using the function cubic-bezier().
Gray line: represents the axes.
Orange line: represents the curve.
Blue lines and blue dots: represents the control to model the curve.
And to use the function cubic-bezier() would have to pick up the coordinates of the blue points that are the P1 and P2 as the function cubic-bezier() is defined in Cartesian, so you have to define the axes x and y of P1 and x and y of P2, the P0 is where the speed of animation and the P3 is where it ends.
Example
cubic-bezier(x1, y1, x2, y2)
x1 is the coordinate x control point p1.
y1 is the coordinate y control point p1.
x2 is the coordinate x control point p2.
y2 is the coordinate y control point p2.
Okay, based on this information above, as when I know that the curve will be fast, slow, normal, etc. When I model the curve up it will indicate what, fast or slow ? or when I model down, how do I know its speed ? gave to understand what I mean ? type I know that has several sites that help you to create these curves as, for example, the site Cubic-Bezier or the website roblaplaca, but that’s not the case, in the graph above the curve gets lower, that indicates what it’s fastest or what? please I need to understand just this!
@hugocsl, thanks for trying to help, but this answer did not solve my question.
– user159189
Now you will understand http://prntscr.com/p2s232 ! Then test with the values backwards, and you will see that it starts super slow and ends fast https://cubic-bezier.com/#. 75,0,1,. 01. It has no secret. And to be
linear, It has to start at 0,0 and end at 1,1, https://cubic-bezier.com/#0,0,1,1, there is no mystery, it is explained there, but it is difficult to understand the first– hugocsl
Sorry buddy, but to be honest I didn’t understand!
– user159189
I think you don’t understand why you think Cubic-Bezier controls time, only that time is controlled by https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration and if the animation has 1 second, it will always have 1 second. Already for you to control how it will be the progress of the animation within that 1 second vc uses Cubic-Bezier() https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function after reading this see again the image of the other comment above and you will understand. Maybe after that you will understand why it is duplicated. And read the links of the documentation
– hugocsl
Value @hugocsl, I read the documentation now I understood!
– user159189