Duration and Easing
A rigidly linear movement looks unnatural to the human eye. Accelerate and decelerate smoothly to help your animation feel more natural.
Duration
Animations should last 150ms–250ms and should feel quick and responsive. Shorter animations are also more easily compiled by machines, helping to achieve the sensation of quick responsiveness.
Easing
Use this curve for the majority of animations. Acceleration and deceleration occur asymmetrically to feel natural. We quickly accelerate at the beginning of the animation and slowly decelerate by the end.
See the curve in action on cubic-bezier.com
Platform |
Protocol |
|---|---|
CSS |
|
After Effects |
Incoming Velocity: 70% Outgoing Velocity: 0% |
