An easing function controls how an animation’s progress changes over time: it can keep motion constant, accelerate or decelerate it, or make it jump between discrete states. It changes the route from the start value to the end value—not those values themselves.
What an easing function changes
Think of an animation as progress moving from 0 to 1 over its duration. The horizontal axis is elapsed time; the vertical axis is how far the animated property has advanced. An easing function maps the time-based input progress to output progress, shaping the animation’s pace.
![Animation in HTML, CSS, and JavaScript [Color Version]](https://m.media-amazon.com/images/I/41ibI92SSuL._SL160_.jpg)
For example, a 300-millisecond transition can move an element the same distance at every moment, or start slowly and accelerate. Both can have the same duration and endpoints. The easing function determines the change in rate, which can make motion feel deliberate, weighty, or segmented.
How the main CSS easing options compare
| Option | Output and motion | Control and considerations |
|---|---|---|
linear |
Continuous, constant-rate progress. | Simple and predictable; no acceleration or deceleration. |
ease, ease-in, ease-out, ease-in-out |
Continuous cubic Bézier curves that shape acceleration and deceleration. | Convenient named curves; use cubic-bezier() for custom control points. |
steps() |
Discrete jumps between output levels. | Specify the number of intervals and where jumps occur; suited to frame-like or segmented states. |
linear() |
Continuous piecewise-linear progress with potentially several slopes. | Specify output stops and optional input percentages; check browser support for the syntax you use. |
What the common ease keywords mean
The CSS keywords are defined curves, not informal descriptions. Their corresponding cubic Bézier values are:
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware match#1 Best Overall
ease:cubic-bezier(0.25, 0.1, 0.25, 1)ease-in:cubic-bezier(0.42, 0, 1, 1)ease-out:cubic-bezier(0, 0, 0.58, 1)ease-in-out:cubic-bezier(0.42, 0, 0.58, 1)
Choose ease-in when motion should begin gently and accelerate. Choose ease-out when it should start quickly and arrive gently. Choose ease-in-out when both the beginning and ending should be gentle. The general-purpose ease curve also changes speed, but follows its own fixed curve.
How to read cubic-bezier()
A cubic Bézier easing function has fixed endpoints at (0, 0) and (1, 1), plus two author-controlled control points: P1 and P2. CSS writes their coordinates as cubic-bezier(x1, y1, x2, y2). The x coordinates must be between 0 and 1; the y coordinates shape the curve and can extend beyond that range, allowing output progress to overshoot.
Rank #2
- Used Book in Good Condition
In the following example, the transition takes 300 milliseconds and uses the identity curve, so progress is even:
.panel {
transition: transform 300ms linear;
}To customize the pace, replace linear with a keyword or a cubic-bezier() value. Adjusting the control points changes how quickly the curve gains or loses progress. The endpoints remain the same, while y values outside the usual 0-to-1 output range can create an overshoot effect.
Free tools Windows power users keep installed
One-click scans. No signup required.
When to use steps()
Use a step function when the animation should hold a state and then jump, rather than move smoothly between values. It divides the input time into equal intervals; the position argument determines how the jumps line up with those intervals.
.spinner {
animation: tick 1s steps(8, end) infinite;
}This requests eight discrete steps per cycle, with the step position set to end. Step timing is useful for sprite-sheet animation, digital counters, segmented indicators, or any effect whose intermediate states should remain distinct. The related keywords step-start and step-end correspond to steps(1, start) and steps(1, end). Position terms also include jump-start, jump-end, jump-none, jump-both, start, and end.
Rank #4
- Complete animation paper set … A great animation starter kit! Our 240 sheet (480 pages) flipbook paper with holes is quality 4.5inch x 2.5inch 120 gsm flippable paper and binding screws!
- Perfect starter kits ... No more making your own flipbooks with scraps and staples. Our kits come with 2 sizes of binding screws, allowing you to trace and make flipbooks of many different sizes!
- Individual pages ... Creating your own movies and animation has never been easier. No more limits on your animations that sewn binding books give you - With individual pages YOU get to decide!
- Tracing made easy ... With our beautiful thick individual pages it is much easier to use with a light source, such as flip book light pads (not included) to trace your animations
- Easy drawing ... No more spiral binding or pesky sewn book spines getting in your way. Our sketch pad paper is individual and free, just like your stop motion animations
What CSS linear() does
CSS Easing Functions Level 2 defines linear() for a piecewise-linear timing curve. Unlike the linear keyword, which keeps one constant rate, this function lets you provide multiple output stops and optional input percentages to change the slope at different points.
animation-timing-function: linear(0, 0.2 30%, 0.8 70%, 1);Here, the listed output stops describe progress values, and the percentages specify input-progress positions for stops that include them. This is useful when a custom motion needs several distinct rates but does not need a smooth Bézier curve.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Choose an easing function for the motion
- For steady movement, use
linear. - For smooth acceleration or deceleration, start with an ease keyword, then use
cubic-bezier()if you need more precise control. - For motion that must hold discrete frames or states, use
steps(). - For several straight-line changes in rate, consider
linear(). - If overshoot is intended, a custom Bézier curve can provide it; consider whether that effect fits the interface.
There is no universally best easing curve. The right choice depends on whether the motion should feel steady, accelerate, settle gently, or communicate discrete states. For production use, check current browser compatibility for newer linear() syntax and step-position forms; MDN notes that the latest standard syntax is not implemented uniformly everywhere.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
