ease is a CSS timing-function keyword for natural-feeling motion: it accelerates gently, reaches peak velocity near the middle, and decelerates gradually. Its cubic Bézier equivalent is cubic-bezier(0.25, 0.1, 0.25, 1). section 11.2.3 section 11.5
Choose ease when an interaction should begin and end gently rather than move at a constant rate.
- Use ease for balanced interface motion such as a menu appearing without suddenly materializing onscreen. section 11.2.3
- Compare it with ease-in, which delays most movement; ease-out, which moves quickly before settling; and ease-in-out, which uses symmetric acceleration and deceleration. section 11.2.3 section 11.4
- Use a custom cubic-bezier() curve instead when the default timing does not provide the desired acceleration or deceleration. section 11.5
Animating a mobile menu
A hamburger-button interaction can toggle an open class on a side menu, while a CSS transition using ease makes the menu enter or leave with gentle acceleration and deceleration. section 11.2.3
cubic-bezier(0.25, 0.1, 0.25, 1)
Inspect the exact cubic Bézier form that CSS associates with the ease keyword. section 11.2.3
