Timing function
A CSS timing function maps elapsed time to progress through a transition or animation.
CSS in Depth, Second Edition
A CSS timing function curve represents how the rate of change progresses over the duration of a transition or animation.
- How it is used
- Controls the rate of change during CSS transitions and keyframe animations.
- How deep it goes
- Explains keyword behaviors and Bézier curves, then demonstrates browser-based curve editing and a custom overshoot.
- Examples
- Compares a hovered moving box under three keywords and uses a translating navigation label to demonstrate bounce.
- What you can do after
- Apply it via CSS keywords or `cubic-bezier()` and adjust a custom curve with browser DevTools.
Read how CSS in Depth, Second Edition explains timing function →
Math for Web Design
A function that maps elapsed animation time to progression through an animation.
- How it is used
- Shapes the speed of CSS animations and transitions to make interface motion feel natural, responsive, and less mechanical.
- How deep it goes
- Explains easing behavior, keyword meanings, and cubic-bezier() syntax, but stops short of deriving the curve mathematically.
- Examples
- Uses linear, ease, ease-in, ease-out, ease-in-out, a mobile menu, and custom cubic-bezier() declarations.
- What you can do after
- Apply it via CSS keywords or cubic-bezier() to control acceleration and deceleration in interface animations.
Related concepts
- cubic-bezier()implemented by · The CSS cubic-bezier() function defines a timing function using a cubic Bézier curve specified by two control points.
- Bézier curveimplemented by · A Bézier curve is a parametric curve whose shape is determined by control points through Bernstein basis functions.
- transitionconfigured by · A CSS transition interpolates changes in a CSS property’s computed value over time when that value changes.
- animationused by · Animation is the presentation of changing visual states over time to create the appearance of motion or change.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.