CSS Easing Cheatsheet
Browse named CSS easing keywords and curated cubic-bezier presets with a live animated preview and copy-paste transition declarations, free and fully client-side.
Loading tool...
What is CSS Easing Cheatsheet?
CSS Easing Cheatsheet is a visual library of transition timing functions. It collects every CSS easing keyword plus more than thirty hand-tuned cubic-bezier presets — snap, overshoot, anticipate, glide — and animates each one so you can pick a motion feel by eye instead of by guesswork.
Key Benefits
- Instant visual comparison of sibling curves within a family
- Copy-paste declarations that work in any stylesheet or Tailwind arbitrary value
- No math required to use overshoot and spring-like curves correctly
Common Use Cases
- •Polishing micro-interactions like buttons, toasts and modals
- •Choosing a shared motion language for a design system
- •Teaching or documenting animation timing to teammates
How to pick a CSS easing curve
- Search or filter: Type an easing name like "back" or pick a family such as Expo to narrow the grid of presets.
- Preview the motion: Click any preset card to select it and watch the dot animate with that exact timing function; press Replay to watch again.
- Copy the declaration: Copy the ready-made transition declaration and paste it into your CSS for the element you want to animate.
Key Features
- 44 named easing presets across ten families, from basic keywords to overshoot and snap
- Animated dot preview that replays instantly whenever you pick a curve
- Search by name and filter by easing family to compare siblings
- One-click copy of the full transition declaration
- Pure client-side reference — no signup and nothing uploaded