Green Ball - Make Motion More Natural Using a Bezier Curve

Green Ball - Make Motion More Natural Using a Bezier Curve


Tell us what’s happening:

I can solve this solution but I don’t understand why visually the “green” ball appears to move further (higher “TOP” offset) than the other balls. There is no difference in the code regarding the offset from “TOP” therefore, how can the green ball “fall farther”?


Go head and share your formatted code and paste a link to the exercise


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);