How to stop smooth css animation with css (@keyframes)?

Question

css

How to stop smooth css animation with css (@keyframes)?

Answer 1

As a time function, you can choose any Bezier curve with 4 anchor points that satisfies the conditions:
Starting point (0,0).
End point (1,1).
For intermediate points, the values ​​of x must be in the range 0..1, y - any.
The syntax for defining a bezier curve in CSS is cubic-bezier(x2, y2, x3, y3). It specifies the coordinates of only two points: the second and third, since the first and last are fixed.
It indicates how fast the animation progresses over time.
Time goes along the x-axis: 0 - start time, 1 - end time transition-duration.
On the y-axis - the completion of the process: 0 - the initial value of the animated property, 1 - the final value.
The simplest option is when the process develops evenly, “linearly” in time. This can be given with a Bezier curve cubic-bezier(0, 0, 1, 1).
This variant cubic-bezier(0.0, 0.5, 0.5 ,1.0) is most likely suitable for you. In general, try to experiment with the values.
More details here https://learn.javascript.ru/css-transitions

Answer 2

cubic-bezier.com
everything is clear )))