It is because the y2 value is greater than 1.0
“Smooth” timing functions are often called easing functions. They correlate a time ratio to an output ratio, both expressed as s. For these values, 0.0 represents the initial state, and 1.0 represents the final state.
Depending on the specific function used, the calculated output can sometimes grow to be greater than 1.0 or smaller than 0.0 during the course of an animation. This causes the animation to go farther than the final state, and then return. For some properties, such as left or right, this creates a kind of “bouncing” effect.
Try to set the y2 to 1 in the assignment.
/* from */
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
/* To */
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1);