Easing
Also called: easing curve, timing function, ease-in, ease-out, ease-in-out.
How an animation speeds up and slows down over its duration. Ease-out, a fast start with a gentle stop, is the safe default for things appearing on screen.
Every ball takes the same 1.2 seconds. Only the easing is different.
Start
Say it in a prompt
Use ease-out, cubic-bezier(0.16, 1, 0.3, 1), at 300ms for elements entering the screen, and ease-in at 200ms for elements leaving. Seen on
You might describe it as
- animation that starts fast and slows down at the end
- movement feels robotic and not smooth
- speed curve of the motion