As a temporary function, you can select any Bezier curve with 4 control points, satisfying the following conditions:
The starting point (0,0).
Endpoint (1,1).
For intermediate points, values of x must be in interval 0..1, y arbitrary.
The syntax to specify a bézier curve in CSS: cubic-bezier(x2, y2, x3, y3). It displays the coordinates of only two points: the second and third because the first and last fixed.
It indicates how rapidly evolving animation process in time.
On the x-axis is time: 0 – start time 1 – end time-transition-duration.
The y – axis is completeness of the process: 0 is the initial value of the animated property, 1 – end.
The simplest variant is when the process is uniformly "linearly" in time. It is possible to specify Bezier curve cubic-bezier(0, 0, 1, 1).
You will approach most likely that this option cubic-bezier(0.0, 0.5, 0.5 ,1.0) in General, try to experiment with the values.
Learn more here
https://learn.javascript.ru/css-transitions