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
Frequently Asked Questions
What is a CSS easing function?
An easing function describes how an animated value progresses over time. In CSS you set it with the transition-timing-function or animation-timing-function property, using a keyword like ease-out or a cubic-bezier(x1, y1, x2, y2) curve.
Which CSS easings cannot be written as cubic-bezier?
Truly bouncy effects that reverse direction several times (classic bounce or elastic) need CSS keyframes or the linear() easing function. Every preset in this cheatsheet is carefully chosen to stay within a single cubic-bezier curve so one declaration is enough.
How do I make an element overshoot its target?
Use a back-family curve such as cubic-bezier(0.34, 1.56, 0.64, 1). The y values above 1 push the animation past its end value before settling, which reads as a friendly snap.
Is this easing cheatsheet free?
Yes. It runs entirely in your browser with no signup, and the generated declarations are plain CSS you can use anywhere, including commercial projects.