Linear() Easing Generator

What is the CSS linear() Easing Function?

The CSS linear() function is a modern easing function that allows developers to define custom, piecewise-linear timing curves for animations and transitions. Instead of relying on predefined easing keywords or a single cubic-bezier() curve, linear() lets you precisely control how an animation progresses over time.

By defining multiple value stops — optionally paired with percentages — you can describe how motion accelerates, decelerates, pauses, or changes speed at specific points along the timeline. This makes the function especially powerful for advanced motion design and fine-tuned UI animations.

In short, linear() bridges the gap between simple easing functions and complex animation behavior, while remaining fully declarative and native to CSS.

Why use the `linear()` function?

The linear() function offers several advantages over traditional easing methods:

Fine-grained control over motion — Define exactly how the animation progresses at different moments in time.
More expressive animations — Create realistic or stylized motion such as stepped acceleration or sudden speed changes.
Native CSS solution — No JavaScript is required, keeping animations performant and easy to maintain.
Predictable behavior — Explicit value stops make the resulting motion easier to understand and adjust.
Ideal for design systems — Works well for creating reusable easing presets and motion tokens.

Basic Syntax of `linear()`

The linear() function defines an easing curve using a sequence of numeric values that represent the animation’s progress over time. These values are evaluated from left to right, mapping time (input) to progress (output).

The basic structure of the function looks like this:

linear(value1, value2, value3, ...)

Each value represents a point on the easing curve. The browser interpolates linearly between consecutive values, creating a piecewise-linear timing function.

By default, if no percentages are specified, the values are evenly distributed across the animation’s duration, from 0% (start) to 100% (end).

You can also explicitly control when each value occurs by adding percentages:

linear(0 0%, 0.5 40%, 1 100%)

In this example, the animation stays slower at the beginning, accelerates after 40% of the duration, and reaches full progress at the end.

Percentages are optional, but when used they must be in ascending order. Any missing percentages between defined points are automatically calculated by the browser.

The linear() function can be used anywhere a timing function is expected, such as:

transition-timing-function: linear(...);
animation-timing-function: linear(...);

This flexible structure makes linear() suitable for both simple linear motion and complex, multi-phase animation curves.

How `linear()` Differs from `cubic-bezier()`

Both linear() and cubic-bezier() are CSS timing functions, but they differ significantly in how motion is defined and controlled.

The cubic-bezier() function defines a single, continuous curve using four control points. This curve describes how the animation accelerates and decelerates over time, but it remains mathematically smooth from start to finish.

cubic-bezier(0.4, 0, 0.2, 1)

In contrast, linear() defines motion as a sequence of straight-line segments. Each segment represents a constant rate of change between two points, allowing the animation speed to change abruptly at specific moments.

linear(0, 0.2 20%, 0.8 70%, 1)

This fundamental difference leads to distinct use cases:

Curve complexity — cubic-bezier() is limited to a single curve, while linear() supports multiple segments within one easing function.
Speed changes — linear() can introduce sharp changes in velocity, which are impossible to express precisely with a single Bézier curve.
Predictability — Each segment in linear() behaves in a strictly linear way, making motion easier to reason about and debug.
Authoring experience — cubic-bezier() is compact and well-suited for simple easing, while linear() excels when fine-grained control is required.

In practice, cubic-bezier() is often sufficient for common UI transitions, whereas linear() shines in advanced animations, motion systems, and scenarios where timing must be tuned with high precision.

When to use `linear()` vs `cubic-bezier()`

Choosing between linear() and cubic-bezier() depends on the type of motion you want to express and the level of control required.

While both functions control how an animation progresses over time, they excel in different scenarios. The sections below highlight common, practical use cases for each.

Use `cubic-bezier()` for smooth UI transitions

cubic-bezier() is ideal when you want a smooth, natural acceleration and deceleration, especially for standard interface interactions. It produces continuous curves that feel fluid and predictable.

Common examples include hover effects, button feedback, menus, and modal transitions.


button {
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

button:hover {
  transform: scale(1.05);
}

In this example, the easing creates a subtle ease-in and ease-out effect that feels responsive and polished without drawing attention to the animation itself.

Use `linear()` for complex or multi-phase motion

linear() is best suited for animations that require precise control over timing, including changes in speed, pauses, or segmented motion.

This is especially useful for loaders, progress indicators, scroll-linked animations, data visualizations, or any motion that needs to follow a specific timing pattern.


.loader {
  animation: progress 2s linear(0, 0.2 30%, 0.8 70%, 1) infinite;
}

@keyframes progress {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

Here, the animation starts slowly, accelerates in the middle, and finishes smoothly, all defined explicitly by the value stops in the linear() function.

A simple rule of thumb

Use cubic-bezier() when you need a compact, smooth easing curve for standard UI interactions.
Use linear() when you need explicit control over timing, multiple motion phases, or non-smooth velocity changes.

In many real-world projects, both functions coexist: cubic-bezier() for everyday transitions and linear() for advanced or expressive motion.

Performance and Browser Considerations

The linear() function is evaluated natively by the browser’s rendering engine, making it a performant and reliable choice for animations and transitions. In most cases, its performance characteristics are comparable to cubic-bezier() and other CSS timing functions.

Rendering performance

Because linear() is part of the CSS animation model, it benefits from browser optimizations such as compositing and GPU acceleration, especially when used with properties like transform and opacity.

The number of value stops does not significantly impact performance in typical use cases. However, extremely long or highly granular definitions can reduce readability and should be used thoughtfully.

Avoiding unnecessary layout and paint work

As with any CSS animation, performance depends more on the animated properties than on the easing function itself. Animating layout-affecting properties such as width, height, top, or left can trigger layout recalculations and repaints.

For best performance, prefer animating properties that can be handled by the compositor: transform and opacity.

Browser support

The linear() function is supported in modern browsers and is part of the evolving CSS Easing specification. Support is generally available in up-to-date versions of Chromium-based browsers, Firefox, and Safari.

For projects that must support older browsers, it is recommended to provide a fallback timing function before linear(), ensuring graceful degradation.


transition-timing-function: ease;
transition-timing-function: linear(0, 0.5, 1);

Browsers that do not recognize linear() will simply ignore it and use the previously declared value.

When to be cautious

Avoid overusing complex easing curves when a simpler function communicates the same intent.
Be mindful of accessibility and user comfort, especially when using abrupt speed changes.
Test animations across devices to ensure consistent behavior and smooth playback.

When used responsibly, linear() delivers high-performance animations with a level of control that was previously difficult to achieve using CSS alone.

Thank you for using this tool

Thank you for taking the time to explore this CSS linear() easing generator. I hope this tool and the accompanying explanations help you better understand and apply advanced timing functions in your animations and transitions.

If you find this page useful and would like to support its continued development, you can contribute any amount using the link below.

Support this page