A timing function maps elapsed animation time to progress through a change. Instead of moving at a constant rate, it controls acceleration and deceleration so motion feels natural rather than mechanical. section 11.2.3 section 1.2.2
CSS supplies predefined keywords for common cubic Bézier curves:
- linear keeps the rate constant from start to finish. section 11.2.3
- ease starts gently, reaches higher velocity near the middle, and decelerates toward the end. section 11.2.3
- ease-in changes slowly at first and accelerates near the end. section 11.2.3
- ease-out changes quickly at first and settles gradually. section 11.2.3
- ease-in-out combines gentle starts and finishes with faster movement through the middle. section 11.2.3
The cubic-bezier() function exposes the curve directly through four control-point values. Those numbers determine how quickly the animated property progresses between its starting and ending values. section 11.2 section 11.2.3
Animating a mobile menu
A menu button can toggle an open class while CSS applies an easing transition: nav elements use a transform transition with a one-second ease function. The JavaScript changes state; the timing function shapes how the menu enters or leaves the screen.
