Free reference
Easing Functions Cheat Sheet
This easing functions cheat sheet shows every standard easing, from easeInSine to easeOutBounce, as a curve you can preview. Click any easing to copy it as CSS cubic-bezier() where one exists, as CSS linear() for elastic and bounce, or as a JavaScript function.
Updated
easeOutCubic
/* easeOutCubic */
.element {
transition: transform 600ms cubic-bezier(0.33, 1, 0.68, 1);
}How to use the Easing Functions Cheat Sheet
- 1
Scan the curves
In curves start slow, Out curves end slow, In-out curves do both.
- 2
Pick one
Click a card. The square at the top plays with that easing and the code panel updates.
- 3
Replay it
Press Replay to watch it again, or pick a neighbour to compare.
- 4
Copy the format you need
Copy CSS or the JavaScript function and paste it into your project.
Formats and limits
| Easings | 30 standard functions: sine, quad, cubic, quart, quint, expo, circ, back, elastic and bounce, each as in, out and in-out |
|---|---|
| CSS output | cubic-bezier() for the 24 that fit one, linear() for elastic and bounce |
| JavaScript output | The exact function, taking progress 0–1 and returning eased progress |
| Accuracy | cubic-bezier() values are close fits, within 4% of the exact curve. Use the JavaScript function when you need it exact |
| Cost and sign-up | Free, no account |
Other tools that do this
We make ExodeUI, which publishes this tool. Here is how it compares, and when another tool is the better pick:
| Tool | Pick it for | What to know |
|---|---|---|
| Easing Functions Cheat Sheet (this page) | Copying a named easing as CSS, including linear() versions of elastic and bounce | Free, no account, runs in your browser. |
| Easings.net | The well-known reference most tutorials link to | Easing Functions Cheat Sheet with the same named functions and a preview of each. |
| cubic-bezier.com | Designing your own curve instead of a named one | Drag the control points and compare curves side by side. |
Frequently asked questions
What is an easing function?
An easing function maps time to progress. It takes a value from 0 to 1 for elapsed time and returns how far the animation should be, which makes motion speed up, slow down or overshoot instead of moving at a constant rate.
Which easing should I use for UI?
Use ease-out curves such as easeOutCubic or easeOutQuart for things entering the screen, ease-in for things leaving, and ease-in-out for things moving from one place to another on screen. Save back, elastic and bounce for playful moments.
Why do elastic and bounce use linear() instead of cubic-bezier()?
A cubic bezier has only two control points, so it can overshoot once at most. Elastic and bounce wiggle several times, which needs the many points that linear() allows.
What is the difference between easeOut and easeIn?
easeOut starts fast and slows at the end, like a drawer sliding shut. easeIn starts slow and speeds up, like something falling. easeInOut is slow at both ends.