Material Design Standard Easing Curve
Implement the Material Design standard easing curve cubic-bezier(0.4, 0, 0.2, 1) for elements that move within the visible area of the screen.
Detailed Explanation
Material Design Standard Curve
Google's Material Design motion guidelines define a standard easing curve for elements that begin and end on screen — moving from one position to another within the viewport.
The Values
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
This curve has a moderate acceleration (the first control point at x=0.4 pulls the curve down slightly) followed by a pronounced deceleration (the second control point at x=0.2 is close to the left, creating a long, gentle slowdown).
Why This Curve?
Material Design emphasizes that motion should feel natural and intentional. The standard curve mimics how a physical object behaves when pushed — it accelerates quickly and then coasts to a stop. The deceleration phase is deliberately longer because the human eye pays more attention to where an object ends up than where it starts.
Material Design Motion Family
| Curve | cubic-bezier | Purpose |
|---|---|---|
| Standard | (0.4, 0, 0.2, 1) | On-screen movement |
| Decelerate | (0, 0, 0.2, 1) | Entering the screen |
| Accelerate | (0.4, 0, 1, 1) | Leaving the screen |
Code Example
.fab {
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.fab:hover {
transform: scale(1.1);
}
The standard curve is used in Material components like floating action buttons, cards, chips, and list items.
Use Case
Apply the Material Design standard curve to any element that moves or changes state while remaining visible — expanding cards, repositioning list items, scaling buttons, or transitioning between views in a Material-styled application.