Animation Timing Functions Explained
- CSS Basics
- Selectors & Specificity
- Box Model & Units
- Typography & Text Styling
- Colors & Color Spaces
- Positioning & Stacking Context
- Flexbox
- Grid
- Grid Advanced
- Responsive Design
- Container Queries
- Pseudo-classes & Pseudo-elements
- Modern Selectors
- CSS Custom Properties
- CSS Functions
- Transitions & Animations
- Transforms
- Forms & Input Styling
- CSS Architecture & Methodologies
- Accessibility in CSS
- Performance & Optimization
- View Transitions & Modern APIs
- Cascade Layers & Scope
What a Timing Function Controls
A timing function describes the speed curve of an animation or transition over its duration - whether it moves at a constant pace, starts slow and speeds up, or the reverse.
The Common Built-in Keywords
| Value | Feel |
|---|---|
linear | Constant speed throughout - can feel mechanical |
ease | Starts slow, speeds up, ends slow - the default, feels natural for most UI |
ease-in | Starts slow, then speeds up - good for something leaving the screen |
ease-out | Starts fast, then slows down - good for something entering the screen |
ease-in-out | Slow at both ends, faster in the middle |
Custom Curves with cubic-bezier()
.card {
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}cubic-bezier() defines a fully custom curve using four control-point numbers, capable of producing effects the built-in keywords cannot, such as a slight overshoot/bounce past the final value before settling.
Step-Based Timing with steps()
.sprite {
animation: walk-cycle 1s steps(6) infinite;
}steps() jumps directly between a fixed number of positions instead of smoothly interpolating - the classic technique behind sprite-sheet animations and typewriter-style text reveals.
Choosing the Right Feel
ease-out generally feels best for elements entering the screen (they should arrive quickly and settle gently), while ease-in suits elements leaving. linear is best reserved for continuous effects like a spinning loader, where a constant, predictable speed looks correct.