Guides · · Maxwell Prehoda
14 Easing Function Examples, From ease-out to Real Springs, You Can Watch and Copy
The short version: use ease-out for things that arrive, ease-in for things that leave, ease-in-out for things that move from one spot on screen to another, linear only for constant motion like a spinner, and a spring when something should feel physical. Almost every good UI animation is one of those five choices with the right strength.
Below are fourteen easing functions and the sources behind them: the CSS keywords as MDN defines them, the easings.net catalogue, Google's Material and IBM's Carbon curves, Lea Verou's cubic-bezier tool, springs from Motion and the CSS `linear()` function, plus `steps()` for frame-by-frame work. Most come with a live demo from our Keyframe Animations directory, and we name the exact curve each demo uses so you can copy it.
1. The CSS keywords: ease, ease-in, ease-out, ease-in-out: Best for knowing what you get when you just type ease
Platform: CSS, every browser (MDN reference)
The four keywords are shorthand for fixed cubic-bezier curves. MDN lists them: `ease` is `cubic-bezier(0.25, 0.1, 0.25, 1)`, `ease-in` is `cubic-bezier(0.42, 0, 1, 1)`, `ease-out` is `cubic-bezier(0, 0, 0.58, 1)` and `ease-in-out` is `cubic-bezier(0.42, 0, 0.58, 1)`. The initial value of `animation-timing-function` is `ease`, so any animation without a curve gets it.
`ease` is a decent default: a quick start and a long, soft landing. The keyword `ease-out` is actually gentler than most people expect, because its control points are mild. That is why design systems and most of the curves below replace it with a stronger ease-out that does more of the work in the first third.
Our Fade In below is the baseline: a plain opacity change on the `ease-out` keyword. Compare it with the next demo to feel how much a stronger curve changes the same motion.
Watch out for: The keywords are too weak for movement over long distances; an element sliding 300px on plain ease-out feels floaty. Reach for a named curve once things travel.
2. easings.net by Andrey Sitnik and Ivan Solovev: Best for picking a named curve like easeOutQuint in seconds
Platform: Free, open source reference (cubic-bezier values)
easings.net is the cheat sheet most developers keep open: 30 functions in 10 families (sine, quad, cubic, quart, quint, expo, circ, back, elastic, bounce), each in In, Out and InOut. Click one and you get its graph, a preview and, where CSS can express it, the cubic-bezier value. The families are ordered by strength, so moving from sine to quint to expo gives the same shape with a harder start and a longer settle.
The values worth memorising: easeOutCubic is `cubic-bezier(0.33, 1, 0.68, 1)`, easeOutQuint is `cubic-bezier(0.22, 1, 0.36, 1)` and easeOutExpo is `cubic-bezier(0.16, 1, 0.3, 1)`. Quint is the sweet spot for most entrances: fast enough to feel responsive, soft enough to land without a jolt.
Our Fade In Up below rises about two em on exactly easeOutQuint. It is the go-to reveal for cards and sections.
Watch out for: Elastic and bounce have no CSS cubic-bezier value; the site marks them as not available in CSS. For those you need keyframes, `linear()` or JavaScript.
3. NN/g's rule: ease-out to enter, ease-in to exit: Best for dialogs, toasts and anything that opens and closes
Platform: Research article, Nielsen Norman Group
Nielsen Norman Group's article on motion characteristics gives the rule in two lines. Entering elements should use ease-out: they move quickly and then settle, so people can track where they come to rest. Exiting elements should use ease-in, so they appear to accelerate away. It also says linear motion is usually perceived as unnatural or awkward compared with eased motion.
The reason is attention. An arrival is the part people watch, so the slow part of the curve sits at the end where the eye lands. A departure is something they have already dismissed, so the slow part sits at the start, almost invisible, and the element is gone at full speed.
Our Zoom Out below closes on an ease-in cubic, `cubic-bezier(0.55, 0.055, 0.675, 0.19)`, holding full opacity for the first 40 percent before it fades. It is the standard close for a modal or a lightbox.
Watch out for: Ease-in on an entrance is the most common easing mistake: the element starts slowly, which reads as lag, then slams into place. If an arrival feels sluggish, check the curve before the duration.
4. Material Design 3: standard and emphasized curves: Best for Android, Compose and Material Web apps
Platform: Material Design 3 tokens
Material's curves come with plain-language jobs. Standard, `cubic-bezier(0.2, 0, 0, 1)`, is for utility animations that begin and end on screen. Emphasized decelerate, `cubic-bezier(0.05, 0.7, 0.1, 1)`, is for M3-styled animations that enter the screen, and emphasized accelerate, `cubic-bezier(0.3, 0, 0.8, 0.15)`, is for ones that exit. There are standard decelerate and accelerate variants too.
The full emphasized curve is the interesting one: it is not a cubic-bezier at all but an SVG path, because a single Bezier cannot describe its shape. On Android it is a path interpolator; on the web you can approximate it with `linear()`, and Jake Archibald's linear easing generator even ships it as a preset.
If you build for the web and want the emphasized-decelerate feel, its first control point does nearly all the work: the element covers most of the distance in the first fraction of the duration and spends the rest settling.
Watch out for: Emphasized curves are strong. Paired with a short duration they look like a jump cut; Material pairs them with its medium and long duration tokens, not the short ones.
5. IBM Carbon: productive and expressive curves: Best for telling task UI apart from showcase moments
Platform: Carbon Design System, open source
Carbon gives every curve two versions. Productive is for task-focused UI: standard `cubic-bezier(0.2, 0, 0.38, 0.9)`, entrance `cubic-bezier(0, 0, 0.38, 0.9)`, exit `cubic-bezier(0.2, 0, 1, 0.9)`. Expressive is for moments that should be noticed: standard `cubic-bezier(0.4, 0.14, 0.3, 1)`, entrance `cubic-bezier(0, 0, 0.3, 1)`, exit `cubic-bezier(0.4, 0.14, 1, 1)`.
Look at the numbers and the idea is visible. The productive curves end at 0.9 rather than 1, so the last stretch is a touch abrupt and efficient. The expressive ones end at a full 1 with a longer tail, which reads as more deliberate. One system, two personalities, chosen per moment instead of per product.
This is the easiest way to give a product a consistent feel: define three productive curves and three expressive ones as custom properties, and ban one-off cubic-beziers in code review.
Watch out for: Expressive easing on routine UI, such as a dropdown on every page, makes the product feel slow even when durations are short. Save it for onboarding, empty states and launches.
6. cubic-bezier.com by Lea Verou: Best for tuning and comparing your own curve
Platform: Free web tool
Lea Verou's cubic-bezier.com is still the quickest way to design a curve by hand. Drag the two control points, watch two squares race with your curve against a comparison curve, save curves to a library and share a permalink. It is how you answer "a bit snappier than ease-out" with an actual number.
It also makes overshoot easy to understand. The y values of the control points can go above 1 or below 0, which is how a single cubic-bezier makes something pass its target and come back. easeOutBack, `cubic-bezier(0.34, 1.56, 0.64, 1)`, is the classic: the second point's 1.56 is what pushes the element past its mark.
Our Scale Up Center below pops from half size to full on that exact easeOutBack curve. Paste it into cubic-bezier.com to see where the overshoot comes from.
Watch out for: An overshoot on scale can push an element outside a container with `overflow: hidden` and clip it for a frame. Leave room, or overshoot on a property that does not clip.
7. Josh W. Comeau: a friendly introduction to spring physics: Best for understanding springs before you tune one
Platform: Interactive article, joshwcomeau.com
Curves describe timing; springs describe physics. Josh Comeau's interactive article is the best introduction to that shift. He explains the three parameters every spring library exposes: mass (heavier objects move more slowly but carry more momentum), tension or stiffness (how tightly wound the spring is, so higher feels snappier) and friction or damping (what stops it oscillating forever, so higher means smoother).
Two of his points save a lot of tuning time. Springs are often useful even with no visible bounce, because the motion still feels organic. And springs suit motion, not colour or opacity changes, where a plain curve is better.
Read it once and every spring API, from react-spring to SwiftUI, becomes the same three knobs with different names.
Watch out for: The article was written for JavaScript springs. In CSS you can now approximate a spring with `linear()`, but it is a pre-baked curve: it will not react to a mid-animation interruption the way a live spring does.
8. Motion: springs by visual duration and bounce: Best for React and JavaScript springs that are easy to tune
Platform: Motion (formerly Framer Motion), free and open source
Motion offers a friendlier way to define a spring than mass and stiffness. Give it a visualDuration, the time in seconds the spring takes to visually reach its target, and a bounce from 0 (no overshoot) to 1 (very bouncy), with 0.25 as the default. Designers can reason in time and bounce while the library handles the physics.
The physics options are still there, damping, mass and stiffness, and setting any of them overrides the time options. That makes the rule simple: pick time-based springs when you want to match a duration scale, physics-based ones when you want gestures and throws to feel weighty.
Springs from a JavaScript library are interruptible by nature: start a new animation mid-flight and it carries the current velocity, which is exactly what drags, sheets and toggles need.
Watch out for: Mixing time-based and physics options in one spring silently ignores the time ones, which makes a spring that ignores your duration tokens. Use one style per spring.
9. CSS linear(): real springs without JavaScript: Best for spring and bounce easing in pure CSS
Platform: CSS, Chrome and Edge 113, Firefox 112, Safari 17.2
`linear()` lets CSS describe any curve as a list of points joined by straight lines, which means springs, bounces and elastic easing finally work without JavaScript. Bramus's Chrome article lists support from Chrome and Edge 113, Firefox 112 and Safari 17.2, and Chrome DevTools has a `linear()` editor.
You do not write the points by hand. Jake Archibald and Adam Argyle's linear easing generator takes a JavaScript easing function or an SVG path and outputs a `linear()` value, with presets for spring, bounce, simple elastic and Material's emphasized curve.
Our Elastic Spring below uses a `linear()` with 31 stops sampled from a damped spring. The rule declares a back-out cubic-bezier first and the `linear()` second, so a browser that does not understand `linear()` keeps the fallback.
Watch out for: A spring baked into `linear()` has a fixed shape for a fixed duration. Change the duration and the spring gets stiffer or looser; regenerate the curve rather than stretching it.
10. GSAP eases and the Ease Visualizer: Best for timeline-heavy sites already using GSAP
Platform: GSAP, free including all plugins since April 2025
GSAP names its eases by strength rather than by maths: `power1` to `power4`, plus `back`, `bounce`, `circ`, `elastic`, `expo`, `sine` and `steps`, each with in, out and inOut. The default is `power1.out`, a gentle ease-out, and you can change it once with `gsap.defaults()`. The Ease Visualizer previews every ease as a graph and generates sample code.
GSAP's elastic and bounce are configurable (amplitude and period for elastic, for instance), and CustomEase lets you draw any curve. Since Webflow made GSAP free on April 30, 2025, those formerly paid extras ship in the main package.
If you only need eased transitions on hover and entrance, the CSS curves above do the job with no library. GSAP earns its place when you sequence many tweens on one timeline.
Watch out for: GSAP's `power` names do not map one to one onto easings.net names (power2 is roughly cubic, power3 quart). Check the graph rather than assuming when you port a curve to CSS.
11. steps(): frame-by-frame on purpose: Best for sprite sheets, typewriters and ticking clocks
Platform: CSS, every browser (MDN reference)
`steps()` is the easing function that refuses to ease. MDN describes it as a stair-shaped curve: an integer sets the number of intervals and an optional keyword, `jump-start`, `jump-end`, `jump-none` or `jump-both`, sets where the jumps happen. `step-start` and `step-end` are the one-step shortcuts.
It is the right tool whenever motion should look discrete: playing a sprite sheet one frame at a time, revealing a typewriter line one character at a time, or a clock hand that ticks instead of sweeping.
Our Sprite Sheet Animation below plays an eight-frame walk cycle with `steps(8)` over 0.8 s, so it jumps a whole frame at a time, while the ground scrolls smoothly underneath for contrast.
Watch out for: Off-by-one frames are the classic `steps()` bug: with the default `jump-end` the last frame is never shown. Count your frames and pick the jump keyword deliberately.
12. Fluent 2: linear only for constant motion: Best for spinners, rotations and marquees
Platform: Microsoft Fluent 2 design guidance
Microsoft's Fluent 2 guidance describes the four basic easing types and adds the caution that matters: linear motion can feel unnatural, so use it only where a consistent rate is the point, like rotations. Anything that starts or stops should ease.
A loop is the honest exception. A spinner has no start or end that anyone watches, so any easing on it shows up as a stutter once per turn. Linear keeps the speed even forever.
Our Spin below turns a full circle every second on linear timing with a single `to` keyframe, the same motion as Tailwind's `animate-spin`.
Watch out for: Linear on a slide or fade almost always looks mechanical. If you see `linear` on anything other than a loop, a progress fill or an opacity crossfade, question it.
13. Our Bounce In: a different easing per keyframe: Best for bounces and settles in pure CSS keyframes
Platform: Motions directory, free, pure CSS Ours
There is a third way to get a spring-like settle in CSS besides overshooting cubic-beziers and `linear()`: give each leg of the motion its own keyframe. MDN explains the mechanism: a timing function set inside a keyframe applies from that keyframe to the next one that sets the same property, which is also why one on the `100%` keyframe is never used.
Our Bounce In springs from 20 percent scale and rings out through 112, 93, 104 and 98.5 percent before it rests, on an ease-out curve so every swing decelerates like a real spring. Our Slide In Right uses explicit per-keyframe curves to overshoot a fraction of an em like a toast landing.
Like every snippet in the directory, the copyable CSS includes a `prefers-reduced-motion` guard that jumps straight to the final state, and two custom properties for colour and size.
Watch out for: Keyframed bounces are fixed choreography. If the animation can be interrupted halfway, for example a menu reopened while it closes, it restarts from the first keyframe instead of carrying its momentum.
14. Our creator: name the curve in plain words: Best for custom animations with your curve already set
Platform: Motions creator (paid plans; a full run is free to try) Ours
You do not need to remember a single cubic-bezier to get the right one. Describe the animation in our creator, or paste your own component as HTML or a screenshot, and say how it should feel: "lands softly like easeOutQuint", "a small overshoot", "exits fast on an ease-in". It asks up to four quick questions while the animation takes shape and returns production-ready CSS keyframes.
Then refine in chat. "Snappier start", "no bounce on exit" or "use Material's emphasized decelerate" are all valid follow-ups, and the result exports as plain CSS you own.
Pair this page with our UI animation duration guide: the curve decides the feel, the duration decides whether it feels fast.
Watch out for: Ask for one curve family per product. Generated animations drift toward a different cubic-bezier every time if the brief does not pin one down.
How to choose an easing function
Answer three questions in order and you will land on one of the curves above.
Match it to the direction
Arriving on screen: ease-out (easeOutCubic or easeOutQuint, or Material's emphasized decelerate). Leaving: ease-in (an ease-in cubic, or Material's emphasized accelerate). Moving between two places on screen: ease-in-out (Material standard, Carbon standard). Looping forever at a constant rate: linear. Discrete frames: steps().
Match it to the personality
Task UI wants restrained curves with short tails, like Carbon's productive set. Brand and showcase moments can take expressive curves and longer settles. Playful products can add overshoot (easeOutBack) or a spring with a little bounce. Serious ones, such as finance, health or anything destructive, should avoid bounce entirely.
Match it to the stack
Plain CSS: cubic-bezier for most things, linear() for springs (with a cubic-bezier fallback before it), per-keyframe timing for choreographed bounces. React or JavaScript: Motion's springs when animations can be interrupted or follow a gesture. GSAP sites: its named eases and CustomEase. Native: SwiftUI and Compose springs, which already default to sensible values.
Replace one ease today
Search your stylesheet for `ease` and `linear` on anything that moves. Swap entrances to easeOutQuint, `cubic-bezier(0.22, 1, 0.36, 1)`, exits to an ease-in cubic, and keep linear for spinners. That one pass changes how a product feels more than any new animation will.
Every curve above is in a live snippet you can copy from our Keyframe Animations directory. Or describe what you want to our creator, curve included, and refine it until it feels right.
Make a notification toast animation in pure CSS keyframes. Enter: slide up 16px and fade in over 280 ms on easeOutQuint, cubic-bezier(0.22, 1, 0.36, 1). Settle: a small overshoot of 2px before it rests. Exit: fade and slide down 8px over 180 ms on an ease-in cubic. Under prefers-reduced-motion, keep a 120 ms fade and no movement.
Common questions
What is the difference between ease-in and ease-out?
Ease-in starts slowly and speeds up, so it suits elements leaving the screen. Ease-out starts fast and slows down at the end, so it suits elements arriving, because the eye can follow where they land. Ease-in-out does both and suits elements moving from one place on screen to another.
What is the default easing in CSS?
The initial value of both transition-timing-function and animation-timing-function is ease, which MDN lists as cubic-bezier(0.25, 0.1, 0.25, 1): a quick start and a soft landing.
Can CSS do spring animations?
Yes, approximately. The linear() easing function, supported in Chrome and Edge 113, Firefox 112 and Safari 17.2, can describe a spring as many points, and tools like Jake Archibald and Adam Argyle's linear easing generator produce the value for you. A CSS spring has a fixed shape, so for springs that react to interruptions or gestures use a JavaScript library such as Motion.
What is the best easing for UI animations?
For most entrances, a strong ease-out such as easeOutQuint, cubic-bezier(0.22, 1, 0.36, 1). For exits, an ease-in. For moves within the screen, Material's standard curve, cubic-bezier(0.2, 0, 0, 1). Keep linear for loops like spinners.
What are Material Design's easing curves?
Material 3 defines standard, cubic-bezier(0.2, 0, 0, 1), for utility animations that begin and end on screen; emphasized decelerate, cubic-bezier(0.05, 0.7, 0.1, 1), for entering; emphasized accelerate, cubic-bezier(0.3, 0, 0.8, 0.15), for exiting; and an emphasized curve that is an SVG path rather than a cubic-bezier.
Sources
- MDN: easing-function
- MDN: animation-timing-function
- easings.net
- NN/g: Executing UX Animations, Duration and Motion Characteristics
- Material Components for Android: Motion theming
- Carbon Design System: Motion
- cubic-bezier.com by Lea Verou
- Josh W. Comeau: A Friendly Introduction to Spring Physics
- Motion: spring
- Chrome for Developers: CSS linear() easing function
- GSAP: Eases
- Fluent 2: Motion