Timing Functions
Timing functions control the rate at which an animation progresses. Common keywords include linear, ease, ease-in, ease-out, and ease-in-out. Custom cubic Bézier curves can provide more precise motion.
Good motion usually has a purpose: communicating state, hierarchy, or spatial relationships.
Animation Timing Curves
Custom Timing
.panel {
transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}💡 The cubic Bézier curve defines how quickly the animation progresses through its duration.
Key Takeaways
- Timing functions control animation pacing.
- Use motion to communicate interaction rather than decoration alone.
Knowledge Check
What does a timing function control?